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

setup是vue3新的配置属性,其用法如下:

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

setup(){

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

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

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

        function  X(){

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

                }          //该为函数

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

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

        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和onMounted

2.在setup()中使用。如:setup(){

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

}

你可能感兴趣的:(vue)