Vue 3.0与2.0比较

与vue2.0进行对比

参考：https://juejin.im/post/6847902215458258958

项目目录

• 移除了配置文件目录：config和bulid
• 移除了static文件夹，新增public文件夹，模板文件index.html放在其中

组合式API（使用的函数需要导入）

setup：新的vue组件,是组合式api入口

/* 两个参数
   props :
   context: 和this 不完全一样，选择性的暴露一些property,主要有slot,emit,attr
*/
setup(props, context) {
   return { }
}

数据声明（ref&reactive）

// 基本数据类型
import { ref } from 'vue'
let count = ref('aaa')
console.log(count.value)   // aaa
count.value = 'bb' // 赋值
/*
基本数据类型获取变量的值需要使用（变量.value）来获取值，在模板中可以直接使用（变量）
*/

// 对象
import { reactive  } from 'vue'
const obj = reactive({
  name: '111'
})
console.log(obj.name)   // 111
return  {
  count,
  obj
}

compute计算属性

import { computed } from 'vue'
const computeVal = computed(() => {
  return count.value * 2
})

watch属性

import { watch } from 'vue'
// watch单个ref数据
 watch(count, (newVal，oldVal) => {
  console.log(newVal, oldVal)
})

// watch单个reactive数据
watch(obj, (newObj, oldObj) => {
  console.log(newObj, oldObj)
})

// watch多个ref数据
 watch([conut,conut1], ([newCount, newCount1], [oldCount, oldCount1]) => {
      console.log(newCount, oldCount)
      console.log(newCount1, oldCount1)
  }， {lazy: true})
  
// watch多个reactive数据
 watch([obj,obj2], ([newObj, newObj2], [oldObj, oldOb   j2]) => {
      console.log(newObj, oldObj)
      console.log(newObj2, oldObj2)
  }， {lazy: true})
// lazy: true 在第一次创建不监听

watchEffect(首次和props改变才会执行)

import { watchEffect } from 'vue'
const watchEffect = watchEffect(() => {
})

isRef(),toRefs()

isRef():监测一个对象是否为ref
toRefs()

生命周期

beforeCreate/created => setup
boforeMount => onBeforeMount
Mounted => onMounted
beforeUpdata => onBeforeUpdate
Updated => onUpdated
beforeDestroy -> onBeforeUnmount
destoryed => onUmonted
errorCaptured -> onErrorCaptured

新钩子：

• onRenderTracked
• nRenderTriggered

模板可以有多个根标签

<template>
   <div></div>
   <div></div>
</template>

主文件main.js

2.x	3.0
import Vue from ‘vue’;	import { createApp } from ‘vue’
Vue.use(router)	createApp(App).use(router)
new Vue.mount(’#app’)	createApp(App).mount(’#app’)

Tree Shaking

用于描述移除JavaScript上下文中的未引用代码
vue 3.0不会打包未用到的API