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})
3v-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">

父组件

<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. 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))
})
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值