vue3.0快速总结

135 阅读1分钟

1.读写更快更小(按需引入),并且采用函数式编程方式

2.支持自定义渲染器(可以直接在vue3上做自己的东西)

3.响应式更改为proxy的侦测

4.深度结合了typescript

5.基于treeshaking优化

vue3.0采用按需引入的方式

const {createApp}=vue

并且采用

import {ref,reactive,toRefs,computed} from'vue' //响应式的引入 ,展开响应式的写法toRefs

setup(){

      const count=ref(0);  //第一种定义一个响应式的数据

      const state=reactive({    //第二种定义一个响应式的数据

          size:36;color:"red";

          num2:computed(()=>state.num1*2)  //计算属性

      })

     console.log(aaa);const msg=0

     //监听器

      const stop=watch(state,(val,old)=>{})

       const stopwach=()=>stop()  //停止监听

       watchEffect(()=>{})  //当dom种使用的数据变化就会触发的方法

     const increment=()=>{count.value++;};//实现响应式的方法,特有的value形式,而且需要return出去,然后再外界调用increment方法来进行msg的相关操作

     return{ msg,increment,num2,stopwach

     state} //vue3.0需要将定义的东西返回出去,才能使用,而且msg不是响应式的

//state可以使用展开符号...state来实现提取其中元素,...toRefs(state)实现响应式

}

取代了data、methods,而且取代了beforeCreate、created两个生命周期函数

组件传值操作

setup(props,context){}  //props可以直接获取父传子的值,context可以操作父组件的方法