Vue3.x快速上手（二）Vue3.x的生命周期和响应式原理

Vue2.0和Vue3.x的生命周期对比

• Vue2.0

• Vue3.x

 Vue3.x生命周期钩子函数

<div id="app">
    <input type="number" v-model='num'>
    <button @click='handleUnmount'>销毁</button>
  </div>
  <script>
    const {createApp,reactive,ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} = Vue
    const app= createApp({
      setup(){
        console.log('setUp执行')
        let num = ref(0)
        onBeforeMount(()=>{
          console.log('onBeforeMount执行')
        })
        onMounted(()=>{
          console.log('onMounted执行')
        })
        onBeforeUpdate(()=>{
          console.log('onBeforeUpdate执行')
        })
        onUpdated(()=>{
          console.log('onUpdated执行')
        })
        onBeforeUnmount(()=>{
          console.log('onBeforeUnmount执行')
        })
        onUnmounted(()=>{
          console.log('onUnmounted执行')
        })
        const handleUnmount = ()=>{
          app.unmount()
        }
        return {
          num,handleUnmount
        }
      }
    })
    let vm = app.mount('#app')
  </script>

        刚进入页面的时候会执行setUp函数，onBeforeMount函数，onBeforeUpdate函数，因为setUp执行在实例还没创建之前，所以可以代替之前Vue2的beforeCreate函数。

        onBeforeUpdate函数，onUpdated函数的执行，发生在视图发生变化的时候。

        调用unmount()方法销毁实例对象，同时视图也被销毁，这是和Vue2不同之处，onBeforeUnmount函数、onUnmounted函数。

响应式数据原理

        Vue2.x底层的数据响应式系统使用的是Object.defineProperty()来实现的，Vue在初始化的时候会递归的将data选项中的属性绑定setter和getter，一旦初始化完成便不会再次执行本操作，对于为定义的属性就不能引起视图的变化，Vue3则解决了这个问题。

Object.defineProperty()

<script>
    let obj = {}
    // 通过defineProperty定义obj的name属性，并绑定setter和getter
    Object.defineProperty(obj,'name',{
      get(){
        console.log('获取name的值')
        return 123
      },
      set(v){
        console.log('设置新值为',v)
      }
    })
    obj.name = 456
    console.log('name',obj.name)
    // 因为没有定义age属性，所以不会触发name的监听
    obj.age = 12
    console.log('age',obj.age)
  </script>

Proxy

 Vue3通过代理对象Proxy包装之后返回的对象代表obj的完全代理。

<script>
    let obj = {}
    let objProxy = new Proxy(obj,{
      set(traget,key,value){
        console.log(`obj的${key}属性正在赋值：${value}`)
        traget[key] = value
      },
      get(target,key){
        console.log(`obj的${key}属性正在取值：${target[key]}}`)
        return target[key]
      }
    })
  </script>

 

 Vue3实例演示

  <div id="app">
    <input type="text" v-model='userInfo.username'>
    <input type="text" v-model='userInfo.password'>
    <br>
    {{userInfo}}
  </div>
  <script>
    const {createApp,reactive} = Vue
    const app= createApp({
      setup(){
        let userInfo = reactive({
          username:'账号',
          password:'密码'
        })
        return {
          userInfo
        }
      }
    })
    let vm = app.mount('#app')
  </script>