Vue3全家桶升級指南一composition API
1、setup()
vue3中的composition API中最重要的就是setup方法了，相當於組件的入口，所有的composition API都必須放到setup()中的使用。
setup是在組件實例初始化之前執行的(beforeCreated之前)，是整個組件的入口函數，這個時候數據和方法還沒有進行掛載，因此在setup中this並不會執行當前組件實例，也不能通過this獲取組件中的數據和方法了。
在模板中使用到的變數和方法必須在setup中return出來，才能使用。
export default {
setup(){
let name="張三"
return {name}//必須在這裡return，模板中才能使用過
}
}
setup中的參數
上面已經說過，因為setup是在beforeCreate之前執行的，所以setup中的this並不會指向當前組件實例，this的值為undefined，那麼我們怎麼和父子組件通訊呢（之前可以通過this.$emit觸發）？這時就需要用到setup的參數了。
setup有兩個參數，第一個是props，父組件傳遞給當前組件的prop都在這個參數對象中，第二個參數是上下文context，裡面包含後attrs,emit,slots，這幾個參數的用法就和vue2中的大同小異了，這裡不做過多贅述。
2、ref用來定義基礎類型的響應式數據
在setup中直接定義的變數不是響應式的，如果需要定義基礎類型的響應式變數，需要使用ref來定義
import {ref} from "vue"
export default {
setup(){
let name = '張三';
setTimeout(() => {
name = '李四';
console.log(name);//這裡的改變了，但是視圖並不會更新
}, 2000);
return { name };
}
}
import {ref} from "vue"
export default {
let name = ref('張三');
setTimeout(() => {
name.value = '李四';
console.log(name.value); //李四
}, 2000);
return { name };
}
需要注意的是，通過ref定義的變數，在js中使用的時候需要通過.value來獲取或者設置值，但是在模板中使用的時候不需要加.value，vue內部已經幫我們處理了。
通過ref獲取dom元素或者組件實例
在vue2中要獲取dom元素或者組件實例，直接在dom元素或者組件上添加ref=”refName”，然後在js中通過this.$refs.refName就可以獲取了。在vue3中，使用方式略有不同。
- 直接在dom元素或者組件上添加ref=”refName”
- 在setup中定義ref，初始值為null，let refName=ref(null)，注意變數的名字一定要和dom或者組件上的ref名字保持一致。
- 在js中通過refName.value獲取dom元素或者組件實例
- 注意，需要在setup總return使用到的ref變數
<template>
<div ref="name">張三</div>
<button @click="change">add</button>
<hr />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
let name = ref(null);
const change = () => {
console.log(name.value);
name.value.innerText = '李四';
};
return { name, change };
},
};
</script>
3、reactive用來定義引用類型的響應式數據
import { reactive } from 'vue';
export default {
setup() {
let obj = reactive({ name: '張三', age: 18 });
setTimeout(() => {
obj.name = '李四';
console.log(obj); //李四
}, 2000);
return { obj };
},
};
在模板中直接通過{{obj.name}}就可以訪問數據了
4、computed計算屬性
創建只讀的計算屬性
import {ref,computed} from "vue"
export default {
setup(){
let count=ref(0)
let newCount=computed(()=>count.value+10)
return {count,newCount}
}
}
創建可讀可寫的計算屬性，在computed中傳入一個對象，通過設置get和set方法創建可讀寫的計算屬性。
import { ref, computed } from 'vue';
export default {
setup() {
let count = ref(1);
let newCount = computed({
get: () => count.value + 100,
set: val => (count.value = val - 1),
});
let change = () => (newCount.value += 100);//給計算屬性賦值會觸發set
return { count, newCount, change };
},
}
5、watch監聽
監聽ref類型的單個數據
import { ref, computed, watch } from 'vue';
export default {
setup() {
let count = ref(1);
let newCount = computed({
get: () => count.value + 100,
set: val => (count.value = val - 1),
});
let change = () => (newCount.value += 100);
watch(count, (newVal, oldVal) => {
console.log(newVal, oldVal);
});
return { count, newCount, change };
},
};
監聽ref類型的多個值
import { ref, watch } from 'vue';
export default {
setup() {
let name = ref('張三');
let age = ref(18);
setTimeout(() => {
name.value = '李四';
age.value = 22;
}, 2000);
watch([name, age], ([newName, newAge], [oldName, oldAge]) => {
console.log(newName, newAge); //李四 22
console.log(oldName, oldAge); //張三 18
});
return { name, age };
},
};
監聽reactive類型的單個值
import { reactive, watch } from 'vue';
export default {
setup() {
let obj = reactive({ name: '張三', age: 18 });
setTimeout(() => {
obj.name = '李四';
}, 2000);
watch(
() => obj.name,
(newVal, oldVal) => {
console.log(newVal, oldVal); //李四 張三
}
);
return { obj };
},
};
監聽reactive類型的多個值
import { reactive, watch } from 'vue';
export default {
setup() {
let obj = reactive({ name: '張三', age: 18 });
setTimeout(() => {
obj.name = '李四';
obj.age = 22;
}, 2000);
watch(
[() => obj.name, () => obj.age],
([newName, newAge], [oldName, oldAge]) => {
console.log(newName, newAge); //李四 22
console.log(oldName, oldAge); //張三 18
}
);
return { obj };
},
};
watch添加配置項
在vue2中watch如果需要添加配置就需要傳入一個對象，來配置immediate和deep，在vue3中的watch同樣可以在第三個參數里添加配置
import { ref, watch } from 'vue';
export default {
setup() {
let name = ref('張三');
let age = ref(18);
setTimeout(() => {
name.value = '李四';
age.value = 22;
}, 2000);
watch(
[name, age],
([newName, newAge], [oldName, oldAge]) => {
console.log(newName, newAge);
console.log(oldName, oldAge);
},
{
immediate: true,
deep: true,
}
);
return { name, age };
},
};
6、watchEffect監聽
import { ref, watch, watchEffect } from 'vue';
export default {
setup() {
let name = ref('張三');
let age = ref(18);
setTimeout(() => {
name.value = '李四';
age.value = 22;
}, 2000);
watchEffect(() => {
console.log(name.value);
console.log(age.value);
});
return { name, age };
},
};
關閉監聽
創建監聽的時候可以用一個變數來接收watch或者watchEffect函數的返回值，然後在需要停止監聽的地方調用這個匿名函數stop()，就可以關閉了
import { ref, watch, watchEffect } from 'vue';
export default {
setup() {
let name = ref('張三');
let age = ref(18);
setTimeout(() => {
name.value = '李四';
age.value = 22;
}, 2000);
setTimeout(() => {
stop();//在這裡關閉監聽後，在4秒後就不會再列印資訊了
name.value = '李四2';
age.value = 222;
}, 4000);
let stop = watchEffect(() => {
console.log(name.value);
console.log(age.value);
});
return { name, age };
},
};
watchEffect和watch的區別
- watch默認是惰性的，只有當監聽的變數發生改變時才會執行，watchEffect不是惰性的，組件初始化的時候就會執行，改變時也會執行。
- watch需要指定要監聽的變數（ref和reactive類型的變數略不同），watchEffect不需要指定，在回調中使用到的響應式變數都會監聽，當這些變數改變時，回調都會執行。
- watch可以再改變時獲取到新值和舊值，watchEffect只能獲取到新值。
