vue2vsvue3

vue3.0 + Ts 入门

		vue2	vue3
Html	template（碎片）	不支持碎片，有且只能有一个根节点	支持碎片，可以有多个
	v-for，v-if	先执行v-for，后执行v-if，所以v-if可以使用item	先执行v-if 判断整个循环体是否开始执行
Script	双向数据绑定原理	APIObject.definePropert()【ES5】缺点：监听不到数组通过序列号修改数据；需使用this.$set(obj, 'newProperty', value)的方法来修改才能触发dom更新;	Proxy 【ES6】
	生命周期	beforeCreated	setup，onmount，生命周期在调用前需要先进行引入。除了这些钩子函数外，还新增 onRenderTracked 和 onRenderTriggered 函数
	API类型	选项式，mixin混入数据	组合式，可以拆分数据和方法，打包成单独文件
	数据定义	直接放Data里即可	需要使用ref，reactive才能获得响应式数据
Css	deep	/deep/,>>>,::v-deep	:deep(span){}

衍生问题：
1、vue3的多节点：

父组件：

<template>
    <div>
        我是父节点
        <Son style="color:red" />
    </div>
</template>

场景1、子组件，没接受style，style进入attr，但因为是单节点，样式会生效。

<template>
    <div>我是子节点</div>
</template>

场景2、子组件，没接受style，style进入attr，但因为是多节点，样式不会生效。

<template>
    <div>我是子节点</div>
    <div>我是子节点2</div>
    {{ $attrs }}
</template>

衍生问题：
2、vue2即使是使用set但是修改的是this.obj.newP也是不触发更新的：

<template>
  <div>
    {{ objValue }}
  </div>
</template>
<script>
export default {
  data() {
    return {
      objValue: {}
    }
  },
  created() {
    this.objValue.newP = 1;//！warning

    setInterval(() => {
      this.$set(this.objValue, 'newP', Math.random())
    }, 1000)
  },
}
</script>