技术标签： 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>
文章浏览阅读4.1w次，点赞122次，收藏88次。上一章节我们利用了事务机制进行了数据的写入（执行了 INSERT 语句）。"增、删、改、查"这四个操作，只做了 "查询" 与 "添加"，"删除" 与 "修改" 的实验还没有做。先别着急，接下来我们先学习一下 "连接池技术"，然后再去练习 "删除" 与 "修改" 的实验也不迟。............
文章浏览阅读2.5k次。打开命令窗口，执行pip install word2vec，如图：ERROR: Command errored out with exit status 1: command: 'e:\python\python.exe' -u -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'C:\\TEMP\\pip-install-x..._word2vec安装失败
文章浏览阅读6.1k次，点赞6次，收藏16次。自己在做项目的时候，在jsp页面通。过${xxx}获取不到值，困扰了自己好久。自己jsp页面如下：<input id="uuid" type="hidden" value="${user.uId}" name="userId"/>controller如下： @RequestMapping(value = "/checkLogin",method = Reques_在jsp文件中requestscoped读取不到元素
文章浏览阅读531次。NSString *urlStr = @"http://localhost:8080/datainterface/interfacename"; NSMutableURLRequest *jsonRequest = [[NSMutableURLRequest alloc] init]; [jsonRequest setURL:[NSURL URLWithString:ur_oc post form
文章浏览阅读915次。如果要在同一台KMS服务器上激活多个产品(如Office 2010和Windows 7)，则需要同时安装并激活Windows KMS主机密钥。例如，当用户A安装完Office 2010后，6、KMS激活之后并非永久有效，KMS客户端必需在180之内再次连接到KMS服务器上对产品进行激活。1、Office 2007的批量授权版本是不需要激活，安装完成便可以正常使用的，但从Office 2010开始，激活的180天之内，KMS 客户端必需主动联系到KMS服务器进行重新激活，激活完成后可以再使用180天。_kms csdn
文章浏览阅读1w次。当前的工作用到了TFS，从没玩过，赶紧补习下，推荐下载地址：http://download.csdn.net/detail/wujiandao/4128032 Getting Started with Visual Studio Application Lifecycle ManagementVisual Studio 2010Other Ver_microsoft visual studio team foundation server 2010
文章浏览阅读6.2k次，点赞7次，收藏33次。知识图谱？有哪些典型应用？01 知识图谱背景1. 什么是知识2. 什么是图谱02 知识图谱的定义03 知识图谱的典型应用1. 医疗领域2. 金融投资领域3. 政府管理和安全领域4. 电商领域5. 聊天机器人领域01 知识图谱背景在给出知识图谱的定义之前，我们先分开讨论一下什么是知识，什么是图谱。1. 什么是知识首先看一下什么是知识。有读者可能会提出这样的问题，在大数据时代，人类拥有海量的数据，这是不是代表人类可以随时随地利用无穷无尽的知识呢？答案是否定的。知识是人类在实践中认识客观世界（包括人类_知识图谱的典型应用包括，传统搜索机器问答社交网络
文章浏览阅读4.1k次。今天很多工程师都使用不同的CAD软件，以至于产生了不同格式的CAD格式文件，因此所有人都难以互换，其中主流的CAD软件有：PTC Creo，Siemens NX，CATIA，SolidWorks，Autodesk Inventor等，如果要向下游进行传递或是需要在线预览下车间等，则需要统一轻量化处理后方可传递或是在线预览，经过近三年的时间探索，目前实现了几种主流CAD文件的轻量化处理，处理后的文件可以在线预览或是传递给下游系统，如有需要可以扫描下方且交流，其中sldprt文件在线预览如下：..._solidworks在线预览
文章浏览阅读398次。在网站中,我们经常看到每当我们准备登陆时,网页询问我们是否保存用户名和密码,以便下次登陆时不用再次输入。诸如此类的功能如何实现哪？经过两天的研究，终于有了收获！现将我的经验与大家分享。在网页中记录用户的信息通常有如下几种方式：Session、Cookie、以及.Net环境下的ViewState等。比较起来，Session将用户的信息暂存在内存中，除非用户关闭网页，否则信息将一直有效。所以，用Ses..._cookie无法使用时如何保存用户信息
文章浏览阅读559次。在刚刚接触PHP时，曾遇到过这样一个坑，就是在PHP7.0版本中无法使用mysql连接数据库，当时只好降级PHP版本来通过mysql来连接数据库(很无奈的做法)，但作为一个与时俱进的程序员，必须学习新的技术才能保持竞争力，所以今天就介绍一下利用PDO_mysql连接MySQL，这也是PHP新版本推荐使用的一个扩展。PDO_mysql操作在php.ini中开启PDO_mysql扩展//取消注释ext..._pat pdo_mysql
文章浏览阅读1.8k次。第一种是数组的值改变，在改变数组的值的时候使用索引值去更改某一项，这样视图不会实时更新，这种情况是因为直接通过索引去改变数组，vue对象监听不到他的变化，所以没有更新；使用vue的变异方法pop(),push(),shift(),unshift(),revese(),sort(),splice()等方法也会触发视图更新。1.利用vue.set(object,key,val)：例：vue.set(vm.obj,'k1','v1');2.利用Object.assign({},this.obj)创建新对象；_vue改变数组或对象视图没更新
文章浏览阅读654次。点击上方“芋道源码”，选择“设为星标”管她前浪，还是后浪？能浪的浪，才是好浪！每天 10:33更新文章，每天掉亿点点头发...源码精品专栏原创 | Java 2021超神之路，很肝~中文详细注释的开源项目RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 MyCAT 源码解析作业调度中间件 E..._系统级的优化