本文深入探讨Vue3的知识点，包括核心概念如注入、虚拟DOM、响应式原理，详细讲解模板语法、计算属性、事件处理、组件注册与通信、脚手架搭建、状态管理等。同时，介绍了Vue3相较于Vue2的变化，如响应式API（proxy、reactive、ref、toRefs）和新特性，帮助开发者全面掌握Vue3开发技能。
目录
3.2 引入模板语法：TodoList（v-model、v-for、v-on）
3.3 模板语法详细介绍（v-on, v-bind, v-model, v-for, v-html, v-show, v-if-v-else-v-else-if)
v-if , v-else, v-else-if，以及引入 key 值阻止diff算法优化
三、计算属性（computed，get，set）和方法（methods）和侦听器（watch）
3.6 计算属性（有缓存，只要元数据不变，不会重新计算；可赋值）
零、介绍
vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
一、Introduce
基础内容：基础语法、MVVM模式、组件化；生命周期、动画特效；
实战项目：环境搭建、Git、数据模拟、本地开发；联调、真机测试、上线；
知识点：Axios、Vuex、Stylus、插件、Vue Router、异步组件、递归组件、公用组件；
二、vue核心概念
2.1 注入
配置对象中的部分内容会被提取到vue实例中，该过程称之为注入，例如：
- data
- methods
Vue注入目的有两个：
- 完成数据响应式
vue是怎么知道数据被更改了？
vue2.0 通过 Object.defineProperty 方法完成了数据响应式，
vue3.0 通过 Class Proxy 完成的数据响应式 - 绑定this
2.2 虚拟DOM树
为了提高渲染效率，vue会把模板编译成为虚拟DOM树，然后再生成真实的DOM
当数据更改时，将重新编译成虚拟DOM树，然后对前后两棵树进行比对（diff算法），仅将差异部分反映到真实DOM，这样既可最小程度的改动真实DOM，提升页面效率
因此，对于vue而言，提升效率重点着眼于两个方面：
- 减少新的虚拟DOM的生成
- 保证对比之后，只有必要的节点有变化。
vue提供了多种方式生成虚拟DOM树：
- 在挂在的元素内部直接书写，此时将使用元素的
outerHTML作为模板 - 在
template配置中书写 - 在
render配置中用函数直接创建虚拟节点树，此时，完全脱离模板，将省略编译步骤
这些步骤从上到下，优先级逐渐提升
注意：虚拟节点树必须是单根的
2.3 挂载
将生成的真实DOM树，放置到某个元素位置，称之为挂载
挂载的方式：
- 通过
el:"css选择器"进行配置 - 通过
vue实例.$mount("css选择器")进行配置
完整流程
二、最简实例 和 实例生命周期
2.1 vue最简应用，hello world
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">{
{content}}</div>
<script>
var app = new Vue({
el: '#root',
data: {
content: 'hello world'
}
});
setTimeout(function () {
app.$data.content = 'bye world'
}, 2000)
</script>
</body>
</html>el:'#root' vue实例化的数据只针对 id为root内使用
{ {content}} : 获取 vue里面data 里面的数据值，属双向绑定
$就是个命名，帮你区分vue应用自身的属性，而不是你自己定义的属性
2.2 vue实例生命周期
//生命周期函数就是vue实例在某个时间点自动执行的函数
var app = new Vue({
el:'#root',
data:{
inputValue:''
},
beforeCreate: function () {
console.log('beforeCreate');
},
created: function () {
console.log('created');
},
beforeMount: function () {
console.log(this.$el);
console.log('beforeMount');
},
mounted: function () {
console.log(this.$el);
console.log('mounted');
},
beforeDestroy: function () {
//app.$destroy()
console.log('beforeDestroy');
},
destroyed: function () {
console.log('destroyed');
},
beforeUpdate: function () {
//app.$data.inputValue = 1
console.log('beforeUpdate')
},
updated: function () {
console.log('updated')
}
})三、模板语法
3.2 引入模板语法：TodoList（v-model、v-for、v-on）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<script src="./vue.min.js"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button v-on:click="handleAdd">提交</button>
</div>
<ul>
<li v-for="(item,index) in list" v-on:click="handleRemove(index)">{
{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleAdd() {
this.list.push(this.inputValue);
this.inputValue = '';
},
handleRemove(index) {
this.list.splice(index, 1);
}
}
});
</script>
</body>
</html>3.3 模板语法详细介绍（v-on, v-bind, v-model, v-for, v-html, v-show, v-if-v-else-v-else-if)
常用指令：
- v-on:click="handleClick" 绑定点击事件。
- 该指令由于十分常用，因此提供了简写
@ - 事件支持一些指令修饰符，如
prevent 可以阻止默认行为 - 事件参数会自动传递
- 该指令由于十分常用，因此提供了简写
- v-bind=""，绑定动态属性，单向（model ==> view）
- 该指令由于十分常用，简写
:
- 该指令由于十分常用，简写
- v-model="inputValue" 数据双向绑定（model <==> view），该指令是
v-on和v-bind的复合版。 - v-for="(item,index) in list" 数据循环。
- v-html: 设置元素的
innerHTML，该指令会导致元素的模板内容失效 - v-show=""，控制元素可见度
- v-if、v-else-if、v-else：控制元素生成
进阶指令：
- v-slot
- v-text
- v-pre
- v-cloak
- v-once
- 自定义指令
v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app" v-html="html"></div>
<script src="./vue.min.js"></script>
<script>
// vm：vue实例
var vm = new Vue({
// 配置
el: "#app", // css选择器
data: {
// 和界面相关的数据
html: `<p style="color:red">Lorem</p>`,
},
});
</script>
</body>
</html>
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="test($event)">点击我</a>
<div @click="test3">
<button @click.stop="test2">点击我</button>
</div>
</div>
<script src="./vue.min.js"></script>
<script>
// vm：vue实例
var vm = new Vue({
// 配置
el: "#app", // css选择器
methods: {
test(e) {
console.log("hello", e);
},
test2(e) {
console.log("button:click", e);
},
test3() {
console.log("div:click");
},
},
});
</script>
</body>
</html>
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<img :src="imgUrl" alt="" />
</div>
<script src="./vue.min.js"></script>
<script>
// vm：vue实例
var vm = new Vue({
// 配置
el: "#app", // css选择器
data: {
imgUrl:
"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2342083191,4139347491&fm=26&gp=0.jpg",
},
});
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<img v-show="isShow" :src="imgUrl" alt="" />
<button @click="isShow = !isShow">切换显示</button>
</div>
<script src="./vue.min.js"></script>
<script>
// vm：vue实例
var vm = new Vue({
// 配置
el: "#app", // css选择器
data: {
isShow: true,
imgUrl:
"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2342083191,4139347491&fm=26&gp=0.jpg",
},
});
</script>
</body>
</html>
v -model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{
{text}}</h1>
<input type="text" v-model="text" />
</div>
<script src="./vue.min.js"></script>
<script>
// vm：vue实例
var vm = new Vue({
// 配置
el: "#app", // css选择器
data: {
text: "abc",
},
});
</script>
</body>
</html>
v-if , v-else, v-else-if，以及引入 key 值阻止diff算法优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="loginType==='mobile'">
<label>手机号：</label>
<input type="text" key="1" />
</div>
<div v-else>
<label>邮箱：</label>
<input type="text" key="2" />
</div>
<div>
<button @click="loginType = loginType==='mobile'?'email':'mobile'">
切换登录方式
</button>
</div>
</div>
<script src="./vue.min.js"></script>
<script>
// vm：vue实例
var vm = new Vue({
// 配置
el: "#app", // css选择器
data: {
loginType: "mobile",
},
});
</script>
</body>
</html>
最低0.47元/天 解锁文章
1216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
