技术标签: vue
vue2 的响应式原理是利⽤es5 的⼀个 API ,Object.defineProperty()对数据进⾏劫持结合发布订阅模式的⽅式来实现的。
vue3 中使⽤了 es6 的 proxy API 对数据代理,通过 reactive() 函数给每⼀个对象都包⼀层 Proxy,通过 Proxy 监听属性的变化,从⽽ 实现对数据的监控。
这⾥是引相⽐于vue2版本,使⽤proxy的优势如下
1.defineProperty只能监听某个属性,不能对全对象监听
2.可以省去for in、闭包等内容来提升效率(直接绑定整个对象即可)
3.可以监听数组,不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作,完美⽀持对数组的监听。 (vue3.x可以检测到数组内部数据的变化)
就是说在组件可以拥有多个根节点。
vue2:
<template>
<div>
<h2> xxx </h2>
<text> xxx <text>
</div>
</template>
vue3:
<template>
<div> XXX </div>
<h2> xxx </h2>
<text> xxx <text>
</template>
Vue2使⽤的是选项类型API(Options API),Vue3使⽤的是组合式API(Composition API)
旧的选项型API在代码里分割了不同的属性: data,computed属性,methods,等等。新的组合式API能让我们用方法(function)来分割,相比于旧的API使用属性来分组,
这样代码会更加简便和整洁
。
setup
函数可以说是Vue3
的属性和方法入口。在Vue2
中,使用的是data
、methods、
computed
。在Vue3
中我们把属性和方法都放在setup
函数中。setup
函数中有以下几个特点:
1.setup(props,context):接收两个参数
(1) props :接收来自父组件传来的参数
(2) context :上下文,主要包含3个使用参数:attrs,emits,slots,相当于Vue2中this的 attrs,emits,slots
2.有返回值,返回值可以是两种:
(1) 返回 对象 ,返回的对象中的属性方法,可在模板中直接使用;
(2) 返回 渲染函数 ,可以自定义渲染的内容;
3.函数内部没有
this
;
4.当内部有异步函数,需要使用到
await
的时候,可以直接使用,不需要在setup
前面加async
vue2 | vue3 | 说明 |
beforeCreate | setup() | 组件创建之前 |
created | setup() | 组件创建完成 |
beforeMount | onBeforeMount | 组件挂载之前 |
mounted | onMounted | 组件挂载完成 |
beforeUpdate | onBeforeUpdate | 数据更新,虚拟DOM打补丁之前 |
updated | onUpdated | 数据更新,虚拟DOM渲染完成 |
beforeDestroy | onBeforeUnmount | 组件销毁之前 |
destroyed | onUnmounted | 组件销毁后 |
activated | onActivated | |
deactivated | onDeactivated |
<keep-alive>
包含,则多出下面两个钩子函数。(1)父传子
vue2:console.log(‘props’,this.xxx)
vue3:setup(props,context){ console.log(‘props’,props) }
父组件提供数据
父组件将数据传递给子组件
子组件通过defineProps进行接收
子组件渲染父组件传递的数据
// 父组件
<script setup>
import { ref } from "vue"
const money = ref(100)
</script>
<template>
<son :sonMoney="money"></son>
</template>
<Son :money="money" :car="car" @changeMoney="changeMoney"></Son>
// 子组件
<script setup>
// 如果使用defineProps接收数据,这个数据只能在模板中渲染,
// 如果想要在script中也操作props属性,应该接收返回值。
const props = defineProps({
sonMoney: {
type: Number,
default: 1
}
})
console.log('setup', props.sonMoney)
</script>
<template>
son
{
{sonMoney}}
</template>
(2)子传父
vue2:this.$emit()
vue3:setup(props,context){context.emit()}
在子组件中获取emit , defineEmits()
子组件中用emit发送事件
父组件要监听子组件的事件
父组件提供事件的处理函数
// 父组件
<script setup>
import { ref } from "vue"
const money = ref(100)
const haddMoney = (value) => {
console.log('haddMoney', value)
money.value = value
}
</script>
<template>
<son :sonMoney="money" @addMoney='haddMoney'></son>
</template>
// 子组件
<script setup>
// 如果使用defineProps接收数据,这个数据只能在模板中渲染,
// 如果想要在script中也操作props属性,应该接收返回值。
const props = defineProps({
sonMoney: {
type: Number,
default: 1
}
})
console.log('setup', props.sonMoney)
const emit = defineEmits(['addMoney'])
const addMoney = () => {
emit('addMoney', 1000)
}
</script>
<template>
son
{
{sonMoney}}
<button @click="addMoney"></button>
</template>
文章浏览阅读413次。编辑距离用于计算序列之间编辑距离和对齐的python模块。我需要一种方法来计算python中序列之间的编辑距离。我没有能够找到任何合适的库来实现这一点,所以我自己编写了一个。在那里似乎有许多可用于计算编辑的编辑距离库两个字符串之间的距离,但不是两个序列之间的距离。这完全是用python编写的。这种实现可能是在python中优化为更快。如果在C中实现。库API是根据difflib.sequencem..._edit distance python lib
文章浏览阅读3.8k次,点赞2次,收藏15次。antd 的upload组件是点开对话框后,按下确实就会上传,而且如果多选文件也会反复调用后端接口来完成上传。因为项目需要,所以要实现手动上传,和一次性上传多个文件(调用一次后端接口)在实现这个功能时,我翻阅了很多博客,可能是因为版本原因,很多代码都无用,最后还是通过翻阅官方文档,才最终实现。..._antd upload
文章浏览阅读246次。注意 第一步在一个文件下打开终端然后 sqlite3 student.db(创建一个数据库),然后再create stu。callback 回调函数 (只有sql为查询语句的时候,才会执行此语句)6--删除一列(sqlite3 不支持) 用下面方法。功能 :打开sqlite 数据库。功能 :关闭sqlite 数据库。基本sql命令,不以 . 夹头,db:指向sqlite句柄的指针。将新表的名字改为原来表的名字。sqlite3的基本命令。功能:执行一条sql语句。以 . 开头的命令。_sqlite 部署
文章浏览阅读1.4w次。前言canal-server同步到kafka本身是支持Kerberos方式的鉴权的,但是鉴于项目现在使用的kafka集群使用的是SASL/PLAIN的鉴权方式,所以需要对canal-server同步kafka做一下适配改造。准备kafka SASL/PLAIN鉴权的搭建我参考的这篇文章kafka SASL/PLAIN鉴权的搭建了解如何使用java向以SASL/PLAIN方式鉴权的kafk..._canal adapter kafka sasl
文章浏览阅读711次。adb(调试桥):debug工具。adb作用:借助adb工具,可以管理设备或手机模拟器状态。adb相关操作命令如下: 1. 显示系统中全部Android平台: android list targets2. 显示系统中全部AVD(模拟器): android list avd3. 创建AVD(模拟器): android create avd_android的shell命令工具:设备规范管理
文章浏览阅读769次,点赞10次,收藏7次。Centos 7.9 在线安装 VirtualBox 7.0_centos安装virtualbox
文章浏览阅读1.4w次,点赞9次,收藏10次。Autodesk卸载工具是一个专门用于Autodesk软件的卸载工具,可以自动识别电脑中的所有Autodesk软件,只需一键点击就能将Autodesk的软件完美卸载,并且不保留任何痕迹,这款卸载工具就可以帮助用户全面卸载Autodesk软件。_autodesk官方卸载工具
文章浏览阅读4.9k次。1.配置书写错误:配置文件value值引号内不能有空格,属性文件配置信息末尾不能有空格(1)打开属性文件中com.mysql.jdbc.Driver后发现多了一个空格(如下我标出了),所以写属性文件时一定别多输入多余的空格了。 jdbc.driverClassName=com.mysql.jdbc.Driver(此处有空格)(2)配置文件中的value值的" "号中前面或..._cannot find class: com.mysql.jdbc.driver
文章浏览阅读1.8k次。软件常用术语,免得你面对各种设计模式头发晕_软件术语
文章浏览阅读2.8k次。2017-08-02@erixhao 技术极客TechBoosterAI 机器学习第二篇 - 非线形回归分析。我们上文深入本质了解了机器学习基础线性回归算法后,本文继续研究非线性回归。非线性回归在机器学习中并非热点,并且较为小众,且其应用范畴也不如其他广。鉴于此,我们本文也将较为简单的介绍,并不会深入展开。非线性回归之后,我们会继续经典机器学习算法包括决策_非线性回归分析方法
文章浏览阅读164次。一、关系运算:1.等值比较: =语法:A=B操作类型:所有基本类型描述:如果表达式A与表达式B相等,则为TRUE;否则为FALSE举例:hive>select 1 from lxw_dual where 1=1;12.不等值比较: <>语法: A <> B操作类型:所有基本类型描述:如果表达式A为NULL,或者表..._josn mincol
文章浏览阅读767次。1 FI/SD 借口配置FI/SD通过tcode VKOA为billing设置过帐科目,用户可以创建自己的科目定义数据表。 科目是做到COA级的,通过KOFI/KOFK这两个condition type确定分别过帐到FI和CO凭证中。 由于PricingProc.是同Sale_sd 和fi 接口产生什么凭证?