onmounted vue3_Vue2和Vue3使用层面上的区别总结

作者：王立发

https://zhuanlan.zhihu.com/p/267040951

Vue 3 的 Template 支持多个根标签，Vue 2 不支持
Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
createApp(组件)，new Vue({template, render})
v-model代替以前的v-model和.sync
vue3中v-model的用法

要求:
3.1. props属性名任意，假设为x
3.2. 事件名必须为"update:x"
效果：

"y" @update:value="y=$event"/>vue2中的写法"y"/>vue3中的写法"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

<Button @click="onClick" @focus="onClick" size="small">你好Button>

          </div>

        setup() {

              const onClick = () => {

                console.log("aaa")

              }

              return {onClick}

            },

Button.vue

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

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

Button.vue

<div><button v-bind="$attrs"><slot/>button>div></template>

onmounted vue3_Vue2和Vue3使用层面上的区别总结相关推荐

C语言：for循环里的变量，在外面声明与在里面声明，在汇编层面上有区别吗？
!!!喜欢看视频的朋友请点这里!!! 一.变量声明在for循环外面 C代码如下: #include <stdio.h> int main() {int i, p;for (i = 0; i ...
ios跟android有什么区别,ios 系统和安卓系统在交互层面上有何区别？
大家来谈谈 ios 系统和安卓系统在交互层面上的区别? 主要是想区别下 ios 系统和安卓系统在交互上的不同点,也可以是 ui 视觉上的区别絮 #oRA 昨天 18:13 1. 导航逻辑差异 ios ...
如何优化WebAPP性能：从五个层面上彻底优化前端项目性能
如何优化WebAPP性能:从五个层面上彻底优化前端项目性能资源层面上的优化该项措施可以帮助我们优化 FP.FCP.LCP 指标. 压缩文件.使用 Tree-shaking 删除无用代码服务端配置 ...
如何优化WebAPP性能：从四个层面上彻底优化前端项目性能
如何优化WebAPP性能:从四个层面上彻底优化前端项目性能资源层面上的优化该项措施可以帮助我们优化 FP.FCP.LCP 指标. 压缩文件.使用 Tree-shaking 删除无用代码服务端配置 ...
DB层面上的设计分库分表读写分离集群化负载均衡
第1章引言随着互联网应用的广泛普及,海量数据的存储和访问成为了系统设计的瓶颈问题.对于一个大型的互联网应用,每天几十亿的PV无疑对数据库造成了相当高的负载.对于系统的稳定性和扩展性造成了极大的 ...
多线程操作数据库时为了防止数据的增删改的混乱该在数据库层还是程序层面上进行同步？
多线程操作数据库时为了防止数据的增删改的混乱该在数据库层还是程序层面上进行同步? [问题点数:60分,结帖人jiao_zg] 不显示删除回复显示所有回复显示星级回复显示得分回复只显示楼主收藏 ...
AOP称为面向切面编程，在程序开发中主要用来解决一些系统层面上的问题
AOP称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题,比如日志,事务,权限等待,Struts2的拦截器设计就是基于AOP的思想,是个比较经典的例子. 一 AOP的基本概念 (1)Asp ...
vue2 怎么用vite_Vue2和Vue3开发组件有什么区别
我们一直都有关注和阅读很多关于Vue3的新特性和功能即将到来.但是我们没有一个具体的概念在开发中会有如何的改变和不一样的体验.还有一些童鞋已经开始又慌又抓狂了 -- "又要开始学新的写法了 ...
vue3.0和vue2的区别
一.默认进行懒观察(lazy observation) 在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者.当数据很大时,这可能会在页面载入时造成明显的性能压力.3.x 版本,只会对「被用 ...

onmounted vue3_Vue2和Vue3使用层面上的区别总结

4. context.emit

5. Vue3中的属性绑定

onmounted vue3_Vue2和Vue3使用层面上的区别总结相关推荐

最新文章

热门文章