初始vue3.0

1.vue3.0亮点：

• 语义明确
• 书写简洁
• 阅读直观，不需要通过vue在编译
• 服用，低耦合性更强（没有this）
• 和react hooks 异曲同工

2.vue3.0如何变快的？

1. diff算法优化：
      vue2.0中的虚拟DOM是进行全量的对比。
      vue3.0中新增了静态标记（PatchFlag），在与上次虚拟节点进行对比的时候，只对比有静态标记的节点，并且可以通过flag的信息得知当前节点要对比的具体内容。
 2. hoist Static静态提升
     vue2中无论元素是否参与更新，每次都会重新创建，再渲染。
     vue3中对于不参与更新的元素，会做静态提升，只会创建一次，在渲染时直接复用。
3. cacheHandlers事件侦听器缓存

3.vue3.0启动方式与vue2.0启动方式对比

//vue3.0启动方式
var app = createApp(App);
app.use(store).use(router).mount('#app')

//vue2.0启动方式
import {createApp} from 'vue'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4.vue3.0与vue2.0定义全局方法对比

//vue3.0定义全局方法
app.config.globalProperties.$mysay = function(xxx) {}

//vue2.0定义全局方法
Vue.prototype.$http=xxx

5.setup组合api

ref：定义值类型数据

reactive：定义引用类型的数据

import {ref,reactive} from 'vue'
set(){
const num =ref(5);
const list=reactive(["vue","react","angular"])
return {num,list};
},

6.computed计算

const rmsg = computed(()=>num.value.split("").reverse().join(""))

const counter = computed({
set:v=>num.value+=1;
get:()=>num.value
})

7.watc监听与watchEffect监听

watch(num, (num, onum) => {
	console.log("num发生变化", num, onum);
})

const stop = watchEffect(() => {
	// 这个回调函数引用的值，都会被监听
	console.log(num.value, list[0]);
	localStorage.setItem("num", num.value);
})