Vue3对比Vue2，这些改动你知道吗？

Vue3对比Vue2，有哪些不同？
首先vue3相比于vue2，监测机制发生了变化

vue2的响应式是通过object.defineproperty实现的，JavaScript对象传入vue实例时，vue会遍历对象的所有property，并通过object.defineproperty把这些property转化为getter和setter，数据发生变化时，就会触发视图的更新；不过这种方式有点缺陷，就是不能监测到对象属性的添加和删除，因此需要用vue.set()来添加和删除。并且也不能监听数组的变化；

而vue3则很好的解决了这个问题，Vue3 利用 Proxy（代理） 实现数据读取和设置拦截，在拦截 trap 中实现数据依赖收集和触发视图更新的操作。

vue2和vue3在写法上有什么变化？
90%的写法完全一致，只是部分发生了改变：
1、Vue 3 的 Template 支持多个根标签，Vue 2 不支持
2、Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
createApp(组件)，new Vue({template, render})
3、v-model代替以前的v-model和.sync
vue3中v-model的用法要求：props属性名任意，这里假设为 x，那么事件名必须为“update：x”

 <Switch :value="y" @update:value="y=$event"/>
 vue2中的写法:<<Switch:value.sync=“y”/>> 
 vue3中的写法:<<Switch v=model:value="y">>

4、context.emit
新增context.emit，与this.$emit（vue3中只能在方法里使用）作用相同

context.emit的用法

setup(props, context) {
        const toggle = () => {
            context.emit('update:value', !props.value)
        }
        return {
            toggle
        }

5. Vue3中的属性绑定

默认所有属性都绑定到根元素
使用inheritAttrs: false可以取消默认绑定
使用attrs或者context.attrs获取所有属性
使用v-bing="$attrs"批量绑定属性
使用 const {size, level, …rest} = context.attrs 将属性分开
 

使用场景
在vue2中我们在父组件绑定click事件，子组件必须内部触发click，而vue3中在父组件绑定子组件的根元素上也会跟着绑定

• ButtonDemo.vue
• <div>
      <Button @click="onClick" @focus="onClick" size="small">你好</Button>
    </div>
  setup() {
        const onClick = () => {
          console.log("aaa")
        }
        return {onClick}
      },
• Button.vue

<template>
  <div>
    <button>
      <slot/>
    </button>
  </div>
</template>

上面的代码Button的click事件会默认传给最外层元素div上绑定，怎么取消这个默认绑定呢？我们就需要使用inheritAttrs:false，使用v-bind=”$attrs”可以把内层的事件绑定到外层想绑定的元素上

• Button.vue

<template>
  <div>
    <button v-bind="$attrs">
      <slot/>
    </button>
  </div>
</template>
<script lang="ts">
  export default {
    inheritAttrs: false
  }
</script>
如果想要一部分属性绑定在button上一部分在div上就需要在setup里设置

• Button.vue
• <template>
    <div :size="size">
      <button v-bind="rest">
        <slot/>
      </button>
    </div>
  </template>
  <script lang="ts">
    import {SetupContext} from 'vue'
    export default {
      inheritAttrs: false,
      setup(props: any, context:SetupContext ) {
        const {size, ...rest} = context.attrs
        return {size, rest}
      }
    }
  </script>

  props和attrs的区别

• props要先声明才能取值，attrs不用先声明
• props不包含事件，attrs包含
• props没有声明的属性，会跑到attrs里
• props支持string以外类型，attrs只有string类型
• export default{
                  inheritAttrs:false,
                  setup(props:any,context:SetupContext){
                  console.log({...props})   **==>>{}**
                  const {size,...rest} = context.attrs
                  return {size,rest}
   
• export default{
                  inheritAttrs:false,
                  props:{
                      size:String
                  }
                  setup(props:any,context:SetupContext){
                  console.log({...props}) **==>>{size:small}**
              

  第一张图里因为没有声明props所以是空对象，第二个声明了size，所以只得到了size

  6.slot具名插槽的使用

  vue2中的用法
  子组件

  <slot name="title">
  1
  父组件

  <template slot="title">
    <h1>哈哈哈</h1>
  </template>
  1
  2
  3
  vue3中子组件用法不变，父组件需要使用v-slot:插槽名

  父组件

  <template v-slot:title>
    <h1>哈哈哈</h1>
  </template>
  1
  2
  3
  7. Teleport传送门组件

  <Teleport to="body">
    需要传送到body下面的内容
  </Teleport>
  1
  2
  3
  8. vue3中动态挂载组件的方法
  通过引入h函数第一个参数是组件，第二个是元素的属性(第一个参数组件的props，也就是直接可以在使用组件的时候传入的属性)，第三个是插槽的属性。
  其中我们在render里监听我们v-model绑定的update事件的时候，需要使用onUpdate:属性名

  import {createApp, h} from 'vue'
  import Dialog from './Dialog.vue'
  export const openDialog = (options: Options) => {
    const {title, content} = options
    const div = document.createElement('div')
    document.body.append(div)
    const app = createApp({
      render() {
        return h(Dialog, {
          visible: true, cancel: () => {},
          'onUpdate:visible': (newValue: boolean) => {
            if (newValue === false) {
              app.unmount(div)
            }
          }
          }, {title, content})
      }
    })
    app.mount(div)
  }
  
  9. watchEffect用来代替生命周期里的onMounted和onUpdated

  初始化页面的时候watchEffect里的代码会执行，当watchEffect里的数据有更新的时候同样会执行

  const count = ref(0)

  watchEffect(() => console.log(count.value))
  // -> logs 0

  setTimeout(() => {
    count.value++
    // -> logs 1
  }, 100)
  1
  2
  3
  4
  5
  6
  7
  8
  9
  注意watchEffect第一次运行是在组件挂载之前，如果需要访问DOM需要将我们的watchEffect放在onMounted里

  onMounted(() => {
    watchEffect(() => console.log(count.value))
  })