VUE 3.X 笔记

一、vue3.x 与 vue2.x 区别

响应式代理

export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
    console.log(newObject)  // {}
    console.log(someObject)  // proxy {}
  }
}

vue2.x 响应式原理是使用Object.defineproperty(obj, prop, desc) 进行代理

vue3.x 响应式原理是使用Proxy进行代理

声明方法

vue3.x 中Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this，所以在vue3中methods中不要使用箭头函数声明方法，调用methods里的方法也不需要this来调用了。

二、组合式API

声明响应式状态

setup() : 组合式api里的钩子函数，在beforeCreate()之前执行，

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    function increment() {
      state.count++
    }

    // 不要忘记同时暴露 increment 函数
    return {
      state,
      increment
    }
  }
}