1、setup()
vue3中的composition API中最重要的就是setup方法了，相當于組件的入口，所有的composition API都必須放到setup()中的使用。
setup是在組件實例初始化之前執(zhí)行的(beforeCreated之前)，是整個組件的入口函數(shù)，這個時候數(shù)據(jù)和方法還沒有進行掛載，因此在setup中this并不會執(zhí)行當前組件實例，也不能通過this獲取組件中的數(shù)據(jù)和方法了。
在模板中使用到的變量和方法必須在setup中return出來，才能使用。
export default {
setup(){
let name="張三"
return {name}//必須在這里return，模板中才能使用過
}
}
setup中的參數(shù)
上面已經說過，因為setup是在beforeCreate之前執(zhí)行的，所以setup中的this并不會指向當前組件實例，this的值為undefined，那么我們怎么和父子組件通信呢（之前可以通過this.$emit觸發(fā)）？這時就需要用到setup的參數(shù)了。
setup有兩個參數(shù)，第一個是props，父組件傳遞給當前組件的prop都在這個參數(shù)對象中，第二個參數(shù)是上下文context，里面包含后attrs,emit,slots，這幾個參數(shù)的用法就和vue2中的大同小異了，這里不做過多贅述。
2、ref用來定義基礎類型的響應式數(shù)據(jù)
在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用來定義引用類型的響應式數(shù)據(jù)
import { reactive } from 'vue';
export default {
setup() {
let obj = reactive({ name: '張三', age: 18 });
setTimeout(() => {
obj.name = '李四';
console.log(obj); //李四
}, 2000);
return { obj };
},
};
在模板中直接通過{{obj.name}}就可以訪問數(shù)據(jù)了
4、computed計算屬性
創(chuàng)建只讀的計算屬性
import {ref,computed} from "vue"
export default {
setup(){
let count=ref(0)
let newCount=computed(()=>count.value+10)
return {count,newCount}
}
}
創(chuàng)建可讀可寫的計算屬性，在computed中傳入一個對象，通過設置get和set方法創(chuàng)建可讀寫的計算屬性。
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);//給計算屬性賦值會觸發(fā)set
return { count, newCount, change };
},
}
5、watch監(jiān)聽
監(jiān)聽ref類型的單個數(shù)據(jù)
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 };
},
};
監(jiān)聽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 };
},
};
監(jiān)聽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 };
},
};
監(jiān)聽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同樣可以在第三個參數(shù)里添加配置
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監(jiān)聽
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 };
},
};
關閉監(jiān)聽
創(chuàng)建監(jiān)聽的時候可以用一個變量來接收watch或者watchEffect函數(shù)的返回值，然后在需要停止監(jiān)聽的地方調用這個匿名函數(shù)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();//在這里關閉監(jiān)聽后，在4秒后就不會再打印信息了
name.value = '李四2';
age.value = 222;
}, 4000);
let stop = watchEffect(() => {
console.log(name.value);
console.log(age.value);
});
return { name, age };
},
};
watchEffect和watch的區(qū)別
- watch默認是惰性的，只有當監(jiān)聽的變量發(fā)生改變時才會執(zhí)行，watchEffect不是惰性的，組件初始化的時候就會執(zhí)行，改變時也會執(zhí)行。
- watch需要指定要監(jiān)聽的變量（ref和reactive類型的變量略不同），watchEffect不需要指定，在回調中使用到的響應式變量都會監(jiān)聽，當這些變量改變時，回調都會執(zhí)行。
- watch可以再改變時獲取到新值和舊值，watchEffect只能獲取到新值。
