vue2和vue3有哪些区别

目录

1.Vue 3 的 Template 支持多个根标签，Vue 2 不支持

2.Vue 3 有 createApp()，而 Vue 2 的是 new Vue()createApp(组件)，new Vue({template, render})

3.v-model代替以前的v-model和.syncvue3中v-model的用法

4. context.emit

5. Vue3中的属性绑定

6.slot具名插槽的使用

7. Teleport传送门组件

8. vue3中动态挂载组件的方法

9. 父组件里获取子组件内容，渲染子组件

10. vue3中ref的使用

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

---

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"
效果：

vue2中的写法

vue3中的写法

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

    你好
  
setup() {
      const onClick = () => {
        console.log("aaa")
      }
      return {onClick}
    },

• Button.vue

上面的代码Button的click事件会在根元素div上绑定，如果我们要指定click的区域为button元素的话我们就需要使用inheritAttrs

• Button.vue

如果想要一部分属性绑定在button上一部分在div上就需要在setup里

• Button.vue

6.slot具名插槽的使用

vue2中的用法
子组件

父组件

vue3中子组件用法不变，父组件需要使用v-slot:插槽名 

父组件

7. Teleport传送门组件

  需要传送到body下面的内容

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

    内容1
    内容2

• Tabs.vue

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

10.2. v-for里的ref

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

})

最后

1. 感谢阅读，欢迎分享给身边的朋友，

 

亲，点这涨工资