vue2.x到vue3.x的一些变化

初学vue3.0这些天，感觉到了vue从2.x到vue3.x的变化还是蛮多的
首先是一个setup函数，这个类似vue2.x中生命周期beforecreate之前就创建的函数，摒弃了vue2.x的data以及methods方法，引用了Reactive()：声明单一对象时使用, ref()：声明单一基础数据类型时使用
reactive

const obj = reactive({ count: 0 })

ref
接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

但是reactive 是不支持响应式的，因此vue3.x引入了toref以及torefs 来增加响应式
toref

const state = reactive({
  foo: 1,
  bar: 2,
})

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

toRefs

const state = reactive({
  foo: 1,
  bar: 2,
})

const stateAsRefs = toRefs(state)

state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

计算属性vue3.x与vue2.x之间的区别不大，但是vue3.x是个组合函数式

const state = reactive({
      count: 0,
      double: computed(() => {
        return state.count * 2
      })
    })
     return {
      ...toRefs(state),
    }

生命周期钩子

beforCreate, created,这两个函数由setup()来代替

beforMount => onBeforMount
mounted => onMounted
beforUpdate => onBeforUpdate
updated =>  onUpdate
beforDestroy => onBeforUnmount
desroyed => onUnmounted