【Vuejs】802- 如何区别 Vue2 和 Vue3 ？

作者：王立发

1​​

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的用法

要求:

3.1. props属性名任意，假设为x

3.2. 事件名必须为"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中只能在methods里使用）作用相同

• context.emit用法

import {SetupContext } from 'vue'
setup(props: Prop, context: SetupContext) {
    const toggle = () {
      context.emit('input', !props.value)
    }
    return {toggle}
}      

5. Vue3中的属性绑定

默认所有属性都绑定到根元素

使用​​

​inheritAttrs: false可以取消默认绑定​

​​使用attrs或者context.attrs获取所有属性

使用v-bing="$attrs"批量绑定属性

使用 const {size, level, ...rest} = context.attrs 将属性分开

5.1 使用场景

在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上绑定，如果我们要指定click的区域为button元素的话我们就需要使用inheritAttrs

• 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>      

6.slot具名插槽的使用

vue2中的用法

子组件

<slot name="title">      

父组件

<template slot="title">
  <h1>哈哈哈</h1>
</template>      

vue3中子组件用法不变，父组件需要使用​

​v-slot:插槽名​

​

父组件

<template v-slot:title>
  <h1>哈哈哈</h1>
</template>      

7. Teleport传送门组件

<Teleport to="body">
  需要传送到body下面的内容
</Teleport>      

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. 父组件里获取子组件内容，渲染子组件

在父组件的setUp里通过​

​context.slots.default()​

​​拿到子组件数组，然后通过component组件渲染

比如：

• TabsDemo.vue

<Tabs>
    <Tab title="导航1">内容1</Tab>
    <Tab title="导航2">内容2</Tab>
</Tabs>      

• Tabs.vue

<template>
  <component v-for="(tab, index) in defaults" :key="index" :is="tab"></component>
</template>
<script lang="ts">
import {SetupContext} from 'vue'
export default {
  setup(props, context: SetupContext) {
    const defaults = context.slots.default()
    return {
      defaults
    }
  }
}
</script>      

vue3中所有的组件最后都会导出一个对象这个对象就是我们的子组件里的type（context.slots.default()[0].type),所以我们可以通过type判断子组件是不是我们要求的子组件，以Tabs组件为例我们需要用户使用的时候下面的子组件全部都是我们的Tab组件

• Tabs.vue

import Tab from './Tab.vue'
export default {
  setup(props, context: SetupContext) {
    const defaults = context.slots.default()
    defaults.forEach(tag {
      if (tag.type !== Tab) {
        throw new Error('Tabs 子标签必须是 Tab')
      }
    })
    return {
      defaults
    }
  }
}      

10. vue3中ref的使用

10.1.单个ref

<script>
import {
  onMounted,
  ref,
} from 'vue';

export default {
  setup() {
    const headline = ref(null);

    // Before the component is mounted, the value
    // of the ref is `null` which is the default
    // value we've specified above.
    onMounted(() {
      // Logs: `Headline`
      console.log(headline.value.textContent);
    });

    return {
      // It is important to return the ref,
      // otherwise it won't work.
      headline,
    };
  },
};
</script>

<template>
  <div>
    <h1 ref="headline">
      Headline
    </h1>
    <p>Lorem ipsum ...</p>
  </div>
</template>      

10.2. v-for里的ref

<template>
  // el当前元素，divs是存储每个元素的数组
  <div v-for="(item, index) in list" :ref="el => { divs[index] = el }">
    {{ item }}
  </div>
</template>

<script>
import {
  onMounted,
  ref,
} from 'vue';

export default {
  setup() {
    const divs = ref([]);

    onMounted(() => {
      console.log(divs.value)
    });

    return {
      divs
    };
  },
};
</script>      

11. watchEffect用来代替生命周期里的onMounted和onUpdated

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

const count = ref(0)

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

setTimeout(() {
  count.value++
  // -> logs 1
}, 100)      

注意watchEffect第一次运行是在组件挂载之前，如果需要访问DOM需要将我们的watchEffect放在onMounted里

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