<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue2 与 vue3 的区别</title>
</head>
<body>
<script>
let a1 = `vue2的双向数据绑定是利用ES5的api Object.definePropert()对数据进行劫持，结合发布订阅模式的方式来实现的；
vue3中使用了es6的 Proxy API 对数据的代理；
优势：
1：defineProprety只能监听某个属性，不能对全对象监听；
2：可以省去for in 闭包等内容来提升效率，直接绑定整个对象即可
3：可以监听数组；`;
let a2 = `vue2中定义数据变量是data，创建的方法是在methods中
vue3中是直接在setup中，新语糖是不需要return，相当方便`;
let a3 = `vue2与vue3生命周期钩子函数不同；
setup obBeforMount onMounted onBeforUpdate onUpdated 需要先引入`;
let a4 = `Vue3.x还增加了onRenderTracked 和onRenderTriggered函数 分别是状态变更和状态触发，
调试会用，生产不会`;
</script>
</body>
</html>
