vue3 setup语法糖定义响应式数据
注意：因为有自动import所以不用引入
import {ref,reactive,toRefs,watch,computed} from 'vue'
<template>
<div>
{{num}}
<button @click="changNum">点击加一</button>
{{obj.name}}
<button @click="changName">点击变李四</button>
</div>
</template>
<script lang="ts" setup>
const num = ref(1)
const changNum =()=>{
num.value++
}
const obj = reactive({
name:"张三",
age:18
})
const changName =()=>{
obj.name="李四"
}
</script>
<style lang="scss" scoped>
</style>
结构后的数据是没有响应式的 所以需要用toRefs
let {name,age} =toRefs(obj)
watch的使用
watch(num,(newVal,oldVal)=>{
console.log(newVal,oldVal);
})
watchEffect的使用
watchEffect(()=>{
console.log(obj.name);
})
watch,watchEffect的区别
watchEffect不需要指定监听的属性，自动收集依赖，只要变化就会执行回调函数
watch只能监听指定的属性
watch有新值老值 watchEffect没有
watch,watchEffect的详解
https://cn.vuejs.org/guide/essentials/watchers.html#stopping-a-watcher
computed的使用
const msg = ref("helloworld")
const reverseMsg=computed(()=>{
return msg.value.split("").reverse().join("")
})
console.log(reverseMsg.value);
注意：computed返回的也是一个对象需要.value
生命周期
console.log("setup");
onBeforeMount(()=>{
console.log("onBeforeMount")
})
onMounted(()=>{
console.log("onMounted")
})
onBeforeUpdate(()=>{
console.log("onBeforeUpdate")
})
onUpdated(()=>{
console.log("onUpdated")
})
onBeforeUnmount(()=>{
console.log("onBeforeUnmount")
})
onUnmounted(() => {
console.log("onUnmounted")
});
