watchEffect一进入页面就会执行一次，也可以进行监听
watchEffect的回调函数中的响应式数据只要发生了变化，回调函数会全部执行一遍
const obj=reactive({
name:'zhangsan',
age:20
})
const msg=ref('你好坏噢')
watchEffect(()=>{
let v=obj.name;
let v2=msg;
console.log(v,v2.value);
})
return{
obj,
msg
}
shallowReactive
使用shallowReactive创建的响应式对象不执行嵌套对象的深层响应式转换，如下，obj.name和obj.age都是响应式的，而obj.stu.no不是响应式的，当改变obj.stu.no的value时，页面中使用obj.stu.no的部分并不会重新渲染。
const obj1=shallowReactive({
name:'法外狂徒',
age:30,
car:'BMW',
dog:'哈士奇',
stu:{
no:55
}
})
toRef 与 toRefs
import {reactive} from 'vue'
export default {
setup(){
const obj = reactive({
name:'zhangsan',
age:20
})
return {
obj,
name:obj.name
}
}
}
如上，我们定义了一个响应式对象obj，并将obj.name给到变量name，在使用时可以直接访问到obj.name，但这样name无法做到响应式，即使用v-model指令绑定name时，无法实现双向数据绑定，使用toRef或toRefs可以实现响应。
toRe接收两个参数，第一个参数为目标对象，第二个参数为值为字符串类型的key，toRefs则直接接收一个目标对象作为参数。
在 setup 中使用生命周期函数
在setup中可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。
因为setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在setup函数中编写。
执行顺序setup>onBeforeCreate>created>onBeforeMount>onMounted。
在Vue3中，beforeUnmount替代了beforeDestroy，unmounted替代了destroyed。
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
export default {
setup(){
console.log('setup');
// dom挂载之前
onBeforeMount(()=>{
console.log('onBeforeMount');
})
// dom挂载之后
onMounted(()=>{
console.log('onMounted');
})
// setup 中return 的数据更新之前
onBeforeUpdate(()=>{
console.log('onBeforeUpdate');
})
// setup 中return 的数据更新之后
onUpdated(()=>{
console.log('onUpdated');
})
// 组件卸载之前
onBeforeUnmount(()=>{
console.log('onBeforeUnmount');
})
// 组件卸载之后
onUnmounted(()=>{
console.log('onUnmounted');
})
}
}
setup 语法糖
在setup中定义的变量与函数都需要return才能在页面中使用，当代码体量越来越大时，有时难免忘记在return中注册。Vue3提供了setup语法糖，在script开始标签中添加setup属性，之后定义的变量与函数，无需return就可以在页面中使用。
<template>
<h1>CompC</h1>
<p>
姓名：<input type="text" v-model="obj.name" /> 年龄：<input
type="text"
v-model="obj.age"
/>
</p>
<button @click="add">添加</button>
<table border="1">
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="(v, i) in list" :key="i">
<td>{{ i + 1 }}</td>
<td>{{ v.name }}</td>
<td>{{ v.age }}</td>
<td><button @click="shanchu(i)">删除</button></td>
</tr>
</table>
</template>
/* 实现深浅拷贝的方式 */
function add() {
/* arr.push(JSON.parse(JSON.stringify(obj))) */
/* arr.push({...obj}) */
if (obj.name.trim() == "" || obj.age.trim() == "") {
return;
}
arr.push({
name: obj.name,
age: obj.age,
});
/* obj.name=''
obj.age='' */
for (var key in obj) {
obj[key] = "";
}
}
