【vue3.0】vue2.0到vue3.0的变化（区别）（上）

1. 结构部分

   程序入口文件 main.js

   • vue2.0

     import Vue from 'vue'
     import App from './App.vue'
     import store from './store'
     import router from './router'
     
     new Vue({
     	store,
     	router,
     	render:h=>h(App),
     }).mount('#app')
     

   • vue3.0

     import { createApp } from 'vue'
     import App from './App.vue'
     import store from './store'
     import router from './router'
     createApp(App).use(store)
     			  .use(router)
     			  .mount('#app')
     

2. 组件语法部分

   vue3.0主要针对api优化，vue3.0兼容vue2.0的写法

   1. vue3.0使用组合式api,统一放在setup回到函数中；

   2. 由于setup这个回调函数在组件创建之前执行，所以没有this，这就意味着，除了props之外，无法访问组件中声明的任何属性（data、computed、methods等）

   3. 数据的响应式

      • ref 对基本结构的数据的值 创建了一个响应式引用（用来定义string、number等）

        // vue2
        data(){
        	return {
        		msg:'哈哈'
        	}
        }
        //vue3 
        setup(){
            let msg = ref('哈哈')
        }
        //使用：
        //1.在模板中使用：
        {{msg}}
        //2.在js中使用：msg.value
        

      • reactive

        对引用数据的值 创建了一个响应式引用（用来定义object、array等）

        let person = reactive({name:'lisi',age:6})
        

      • toRefs

        需要es6解构使用时，先toRefs方法包装一下，避免对象的每个属性失去响应式

        let {name,age} = toRefs(person)
        

      • readonly

        有时我们想要跟踪响应式对象(ref或reactive)的变化，但又不想程序在某个地方修改它，使用readonly创建一个只读的对象

        let orig = reactive({mount:0})
        let copy = readonly(orig)
        orig.count++
        copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly.
        

   4. 组合式api

      setup(){
          // 1. data数据
      	let msg = ref('哈哈')
      	let person = reactive({name:'lisi',age:6})
          
          //2. methods方法
          const changeMsg = ()=>{
              msg.value = '改变哈哈'
          }
          const changePerson = ()=>{
              person.age = 20
          }
          
          //3. watch监听器
          watch(msg,(newValue,oldValue)=>{
              console.log(newValue,oldValue)
          },{deep:false,immediate:false})
          
          watch(person.age,(newValue,oldValue)=>{
              console.log(newValue,oldValue)
          })
          //4. 计算属性
          const filterMsg = computed((num)=>{
              return msg.value+num
          })
          return {
              msg,
              person,
              changeMsg,
              changePerson
          }
      }
      
      

3. props

   import {toRefs} from 'vue'
   setup(props){
       const {title} = toRefs(props)//props是响应式的，直接使用es6解构会消除props的响应式，所以通过toRefs方法完成解构赋值
       console.log(title)
   }
   

4. context上下文

   export default {
       //传递给setup函数的第二个参数是context,它暴露了组件的三个属性
       setup(props,{attrs,slots,emit}){
           
       }
   }
   

5. 生命周期

   生命周期函数在销毁的时候有变化：

   beforeDestroy --> beforeUnmount
   destroyed --> unmounted
   

6. 自定义指令的api变化
   

   //vue2.0
   Vue.directive('focus',{
       inserted:function(el){
           el.focus
       }
   })
   //vue3.0
   const app = creatApp({})
   app.directive('focus',{
       mounted(el){
           el.focus()
       }
   })
   

   <input v-focus/>
   

   未完。。。。。。