Vue3 学习

基础

js:https://www.bilibili.com/video/BV15T411j7pJ/?spm_id_from=333.337.search-card.all.click&vd_source=9747207be61edfe4ec62226fc79b3589
官方文档： https://cn.vuejs.org/ 版本之间差异在关于---》版本发布 https://cn.vuejs.org/about/releases.html
vue3支持选项式和组合式，选项式基本等于vue2
vue文件：国内镜像： https://unpkg.zhimg.com/vue@3.3.4/dist/vue.global.js

工具 vscode :安装 Preview on Web Server Live server volar（禁用掉vue2 的vetur）

Chrome安装插件 vue-devtools.crx
Vue引入的验证
1) 控制带输入Vue ,就会出现这个全局变量的信息
2)也可以使用帮助文档API中验证，比如在控制台输入Vue.version
入门：{{}}

<!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"><script src="vue3-20230826.js"></script><title>Document</title>
</head>
<body>{{10+20}}<div id="box">{{ 10+20 }}</div><script>Vue.createApp().mount("#box")   //虽然上面引入了vue，但是需要再启动Vue，//让全局变量Vue创建APP,并且指明应用 挂在哪里,也就是去管理哪里//因为是id="box",所以前面要加#</script>
</body>
</html>

并且支持多个挂载，也就是还可以再写一行Vue.createApp().mount("#box2")

但是不能挂载 body节点，一般用div

引入变量

在createApp()中增加

 <script>Vue.createApp({data:function(){}}).mount("#box1")</script>

data:function(){ } zai ES6中简写为

 <script>Vue.createApp({data(){}}).mount("#box1")</script>

在data()重定义变量及返回值

  <script>Vue.createApp({data(){return{myname:"i7i8i9"     //实际是一个变量，后续可以叫做状态}}}).mount("#box1")

为了方便在控制台查看，也可以定义一个全局变量

    <script>var app= Vue.createApp({data(){return{myname:"i7i8i9"}}}).mount("#box1")</script>

这样就有了app这个变量，可以在控制台输入app.myname查看和调试

原理

vue2原理：

用js原生代码模拟，创建一个obj对象，js提供了defineProperty来感知变量操作

缺点是只针对单个对象的属性，要实现其他属性，只能嵌套循环，不能对数组等操作，故需要hack等技术包装

<!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>Document</title>
</head>
<body><script>var obj={}Object.defineProperty(obj,"myname",{get(){console.log("get")},set(value){console.log("set",value)}})//可以在控制台利用obj.myname尝试</script></body>
</html>

测试：

再加一个对dom元素操作

<!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>Document</title>
</head>
<body><div id="box"></div><script>var obj={}Object.defineProperty(obj,"myname",{get(){console.log("get")},set(value){console.log("set",value)box.innerHTML=value}})//可以在控制台利用obj.myname尝试</script></body>
</html>

效果

vue3原理

如果浏览器支持ES6, 使用ES6的proxy,否则使用vue2拦截原理

上文只能拦截对象的制定属性，而下文则可以拦截对象本身，也就不用限定对象

<body><div id="box"></div>hello<script>// Ed6  Proxy  代理var obj={}var vm=new Proxy(obj,    //vm就是代理人{get(obj,key){console.log("get方法")return(obj[key])},set(obj,key,value){console.log("set方法")obj[key]=valuebox.innerHTML=value}})</script>
</body>