vue3的setup、computed、watch、watchEffect使用。

setup是vue3新的配置属性，其用法如下：

import {reactive,computed,ref,watch} from "vue"   //按需引入

setup(){

let x = ref(y)          //x为变量名，y为数据。

/* 如果数据为对象时可以使用ref()也可以使用reactive()但二者使用有区别，reactive()方式改变数据时，z1.key =""；ref()方式改变数据时，z1.value.key =""。*/

let z1 = reactive(对象数据(q))           

let z2 = reactive(数组)          //该方式修改数组元素可以通过下标修改。

function  X(){

console.log(x) //直接使用不需要this

  }          //该为函数

let  z3 = computed(()=>{········}) //计算属性用法。


 /*（1）vue3的watch使用，第一个参数为需要监听的变量数据（数组或者单个变量），第二个为操作（函数），第三个为配置（用法与vue2一致；一般没有配置时省略）。“在vue3中可以有多个watch用了监听不同属性”。（2）注意：1.如果监听reactive方式的数据oldValue的值无法正确获得。2.如果监听reactive方式的数据deep配置无效，始终开启深度监视。3.如果监听ref方式的对象时需要开启深度监视（即在第三参数{}中加入deep:true）。*/

watch([],(newValue,oldValue)=>{   ······· },{})       

watch(()=>z1.key,(newValue,oldValue)=>{·······},{})  //监听对象中的某个值。若用该方法监视对象里多级对象的值时需要开启深度监视（即在第三参数{}中加入deep:true。）

watchEffect(()=>{·····})    //智能监视，只监视回调函数里的用到的数据（属性、数组、对象等）。没用到的数据不监视。

     return {x,X   //函数不需要加括号

         }  //必须要return否则插值语法无法使用。

}

非页面引用：x.value = y         //y为数据，若使用reactive方式则普通调用即可。

页面使用：与vue2一致。

---

---

                                       vue3中使用生命周期钩子

方式一：与vue2中使用一致，通过配置项。

方式二：1.引入相应的生命钩子模块。如：impor {onBeforeMount} from "vue"        //该方式没有beforeCreate和create。vue2中销毁前和销毁替换成，onBeforeUnmount和onMounted2.在setup()中使用。如：

setup(){

        onMounted(()=>{····})

}