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只能獲取到新值。