Vue2.0 零基础通俗易懂🎢
本篇文章会持续更新，至Vue3.0+TS 整个前后端架构生态笔记，请多多关注； 当个笔记看也好鸭~
本篇文章学习于尚硅谷，快速跳转 最近互联网环境真的爆炸啊，为了多一口饭吃还是赶紧学一下前端吧
前置知识： 此篇并不适合初学者，学习Vue之前，还需掌握：HTML+CSS+JS 前端三件套；
分享个人一些📄：JavaScript、 JavaScript新特性、前后端交互ajax、前端工程\模块化
懂个锤子Vue🔨
Vue是一套用于构建用户界面的渐进式==JS框架== 是中国程序员 尤雨溪😶🌫️开发的 本次学习的版本是：2.7.14长期稳定版本
-
构建用户界面： Vue可以基于数据渲染出用户看到的页面
-
渐进式框架： 它允许开发者逐步采用其核心功能、相关工具🔧
声明式渲染->组件化应用->客户端路由->集中式状态管理->项目构建
根据项目需求选择使用
Vue.js的不同部分，逐步引入更高级的功能。并不会让新手难以上手影响开发🤔
声明式渲染：
使用简洁的模板语法来描述应用程序的UI结构，Vue会自动处理数据与视图之间的关系，以达到数据驱动视图更新的效果
组件化应用：
通过组合可重用的组件来构建应用程序，每个组件具有自己的模板、逻辑和样式
通过组件化开发，你可以将应用程序拆分成独立的、可维护的部分，提高代码的重用性和可测试性
客户端路由：
Vue Router允许定义不同的路由，每个路由对应一个特定的组件，通过路由，实现无刷页面切换|更好的用户体验；
集中式状态管理：
随着应用程序变得复杂，多个组件之间的数据共享和状态管理变得重要，
Vuex将应用程序的状态集中存储在一个单一的地方，并提供了一些规范方式处理状态变化、响应更新、数据共享
Vue CLI项目构建：
帮助你快速创建、配置和构建Vue项目，提供了许多优化和扩展的选项：代码压缩、打包分离、静态资源优化等
Vue环境安装
学习使用Vue 之前首先要获取Vue的JS文件，
可以通过官网获取Vue2👉 安装方式：直接<script>引入、NPM、Vue CLl命令行工具...
CDN
Vue提供的CDN版本，方便同学们快速上手开发》这个链接可能不太稳定，需要建议官网为准
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script/>块
入门就直接采用，<script/> 方式进行引入，官网针对不同需求提供了两种Vue.JS的文件，直接引入项目即可使用：
-
开发版本vue.js： 保护完整的警告和调试模式，因此文件比较大，建议开发使用可以给予报错提示⚠️;
-
生产版本vue.min.js： 删除了警告，
37.51KB min+gzip，通常部署使用：包的大小方便传输🔁; -
两个文件没有任何区别，仅仅是大小和压缩无功能区别
Vue HelloWord Demo
🆗上述的准备工作做好了就开始咱们的，入门案例：
- 引包官网 (开发版本包 / 生产版本包)
- 创建容器 (设置Vue所管理的范围)
- 创建Vue实例对象
- 配置绑定Vue对象
Demo案例📑：
本篇文章Vue的基础代码，都是以这个结构为准，01、02、03….Vue文件为准，
01HelloWorld.html🔖
01HelloWorld.html 运行效果可以下载代码查看😶🌫️
<!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>
<!-- 1.引入的是开发版本包 -->
<script src="../VueJS/vue.js" ></script>
</head>
<body>
<!-- 2.创建Vue的容器,Vue是基于容器开发的 -->
<div id="root"> <!-- 容器root名可自定义 -->
<p>{{wsm}}</p> <!-- Vue的模板插值语法,可以获取Vue实例属性|JS表达式 -->
</div>
<!-- 多容器挂载Vue实例遵循先入为主原则; -->
<div id="root">
<p>{{wsm}}</p>
</div>
<script>
//3.创建Vue实例对象
const vm = new Vue({
//4.配置绑定Vue对象：el、data
// el: document.getElementById('root'), 支持使用JS原生方式绑定容器;
el: '#root', //el挂载:用于指定当前Vue实例为那个容器服务,值使用CSS选择器进行匹配挂载;
data: { //data:用于存储数据供el锁挂载的容器使用,值是一个对象(后期组件化可以是一个函数返回值);
wsm:'Hello World',
}
})
</script>
</body>
</html>
想要使用Vue框架必须创建一个Vue的实例，new Vue() ，参数是一个配置对象 new Vue({ ... })
root容器里的代码依然符合HTML规范，只不过混入了一些特殊的Vue语法，容器中的特殊代码被称为 Vue模板
- Vue实例、容器： 是一一对应的，真实开发中只有一个Vue实例，并配合组件使用；
- 一个项目中仅有一个Vue实例： data中定义数据会显得很臃肿不利于使用，组件可以方便管理data；
Vue框架就是对这个实例对象进行操作：
-
el： 用于指定当前Vue实例，服务的容器，支持使用CSS选择器进行匹配挂载；
小技巧： 不使用CSS选择器也支持直接使用
原生JS进行绑定el: document.getElementById('root'), -
data： 用于存储数据最终会被添加到Vue实例上，供
{{xxx}}插值语法使用；data中的数据发生改变，页面中该数据对应的插值处也会自动更新；Vue数据绑定；
Vue实例和容器可能存在的问题🤔❓：
多个Vue实例EL挂载同一个容器呢？如果多个容器被一个Vue实例挂载呢？
- 通过修改上述代码验证：Vue实例和容器遵循
一一对应，先入为主原则，未匹配的则不翻译Vue模板；
Vue响应式编程：
data中的数据发生改变，那么页面中用到该数据的地方也会自动更新 这里就不介绍原理后面出一个文章
上图可以看到Vue的实例对象：
vm属性修改页面也立刻发生改变：
因为：data的数据最终会映射到vm上，模板容器中使用Vue的实例对象，Vue实例发生改变页面容器也发生改变；
- 访问：Vue实例数据： "实例.属性名"
- 修改：Vue实例数据： "实例.属性名" = "值"
- 相比于原生的JS，Vue响应式更加方便操作
DOM，使开发者更专注于业务核心逻辑；
Vue开发者工具：
Vue DevTools 是一个旨在增强 Vue 开发人员体验的工具： 它提供了一些功能来帮助开发者更好地了解 Vue 应用；
安装： 谷歌应用商店安装(国外网站，需要魔法访问🪄、极简插件，国内插件网站🔗
设置： 🆗插件下载之后，解压—>至—>Goggle扩展程序：—>简单设置；
安装之后：F12后看到多一个Vue的调试面板： 方便开发者调试；
{{ 插值语法 }}
插值表达式：
- 语法：
{{ 表达式|Vue实例属性 }} - 利用表达式进行插值，渲染到页面中，表达式:是可以被求值的代码，JS引擎会将其计算出一个结果；
- 插值表达式： Vue一种模板语法
{{ 表达式|Vue实例属性 }}：可以获取Vue实例属性、表达式渲染至Vue容器中；
<!-- 省略了一些代码... -->
<div id="root">
<h1>{{ title }}</h1>
<p>姓名: {{ person.name }}</p>
<p>姓名大写: {{ person.name.toUpperCase() }}</p> <!-- .toUpperCase() JS函数让英文大写 -->
<p>年龄是否成年: {{ person.age>=18?'成年':'未成年' }}</p> <!-- 三元表达式 -->
<!-- 注意使用一下的报错: -->
<!-- <p>Vue实例不存在的属性 {{title1}}</p> -->
<!-- <p>插值语法不支持使用JS语句 {{ if }}</p> -->
<!-- <p title="{{ nickname }}" >插值表达式仅可以在容器中标签体使用</p> -->
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
//基本数据类型使用
title:'插值语法',
person:{ //对象类型使用;
name:'zhangsan',
age:18
}
}
})
</script>
注意点：
- 使用Vue实例数据要存在不然报错❌
- 支持使用JS表达式，而不是JS语句
{{ if }}、{{ for... }}❌ {{ 插值表达式 }}仅可以在容器中标签体使用，并不可以作为属性使用；<p title='{{xxx}}' >P标签</p>❌
Vue常用指令：
在Vue.js 中，有许多内置的指令directives：用于执行不同的任务，这些指令都以v-为前缀；下面一些常用Vue指令：
内容渲染指令：
内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容： 常用的内容渲染指令：
-
v-text类似innerText：类似 innerText，使用该语法，会覆盖 p 标签原有内容；
使用语法：
<p v-text="HELLO">hello</p>，意思是将 HELLO 值渲染到 p 标签中； -
v-html类似 innerHTML：与v-text类似：使用该语法，会覆盖 p 标签原有内容，且能够将HTML标签的样式呈现出来；
<div id="root" >
<p v-text="" >hello world</p>
<p v-html="vhs" >hello world</p>
<p v-text="vts" >hello world</p>
</div>
<script>
const vm = new Vue({
el:"#root",
data:{
vts:"<strong>你好, 世界🌏</strong>",
vhs:"<strong>你好, 世界🌏</strong>"
}
});
</script>
v-html指令则用于更新元素的 innerHTML 它可以解析HTML标签，并将其渲染为DOM元素；v-text指令用于更新元素的 textContent 它会替换元素内部的文本内容，但不会解析其中的HTML标签；
条件渲染指令：
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏：
-
v-show： 当指令的表达式值为真时
true，元素会显示，值为假false，元素会被隐藏display:none其原理是： 通过切换元素的CSS
display属性来控制元素的显示和隐藏，元素会隐藏，但仍然存在于DOM中~ -
v-if： 也是控制元素显示|隐藏，与
v-show不同，v-if是真正的条件渲染，根据表达式的值来添加或移除元素；表达式的值为真，Vue会确保元素被渲染到DOM中，值为假，元素不会被渲染，事件监听器>子组件适当地被销毁和重建；
<div id="root">
<p v-show="showMessage">这是使用 v-show 控制的消息;</p>
<p v-if="showMessage">这是使用 v-if 控制的消息;</p>
<button @click="cutMessages">切换消息显示</button>
</div>
<script>
const vm = new Vue({
el:"#root",
data:{
showMessage:true,
},
methods:{
cutMessages(){
this.showMessage = !this.showMessage;
},
}
});
</script>
v-if 也可以和 v-else、v-else-if 配合使用： 创建一个条件块链；
注意： v-else\v-else-if 辅助v-if进行判断渲染，需要紧接着v-if使用；
<!-- v-else-if -->
<p v-if="score >= 90">成绩评定A：奖励电脑一台</p>
<p v-else-if="score >= 70">成绩评定B：奖励周末郊游</p>
<p v-else-if="score >= 60">成绩评定C：奖励零食礼包</p>
<p v-else>成绩评定D：惩罚一周不能玩手机</p>
v-show更适合频繁切换显示状态的场景，因为它不涉及DOM元素的添加和移除，性能开销较小v-if则适合运行时条件不太可能改变的场景，因为它涉及更多的DOM操作
事件绑定指令：
v-on 是Vue.js中的一个指令，用于监听DOM事件并在事件触发时执行一些JavaScript代码：
这个指令可以应用于几乎所有的DOM事件：点击click、键盘输入keyup、鼠标移动mousemove 等，语法如下：
函数处理器：
在上述的：条件渲染指令 的Demo就是如此：
也是常见的做法，事先在Vue实例的 methods 属性中定义一个方法，然后在 v-on 事件中调用方法|函数；
注意： Vue实例 methods 中定义函数，为了方便操作：函数中的this就是Vue实例， 函数一定不能是: 箭头函数；
<div id="root" >
<div class="box">
<h3>小黑自动售货机</h3>
<button @click="buy(5)">可乐5元</button>
<button @click="buy(8)">牛奶8元</button>
<button @click="buy(10)">咖啡10元</button>
</div>
<p>银行卡余额：{{ money }}元</p>
</div>
<script>
const vm = new Vue({
el:"#root",
data:{ money: 100, },
methods: { //Vue实例method属性中定义函数;
buy (price) { //定义函数,并支持传递参数根据顺序匹配函数;
this.money -= price; //内部this指向的就是Vue实例,可以获取data数据;
}
}
});
</script>
- 事件处理器参数： 函数参数可以在模板中进行传输，如需原生事件对象，可以通过
$event进行传递； - 性能考虑：
methods中定义的方法会在每次调用时重新执行，避免在这些方法中执行昂贵的操作； - 错误处理： 在方法中进行适当的错误处理，确保用户界面能够优雅地处理任何异常情况；
内联处理器：
支持直接在 v-on 或其缩写 @ 后面写一个JavaScript表达式，这个表达式会在事件触发时执行，例如：
<div id="root" >
<!-- v-on: 简写为 @ -->
<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++">+</button>
</div>
<script>
const vm = new Vue({
el:"#root",
data:{
count: 100,
}
});
</script>
属性绑定指令 ：
v-bind 是Vue.js中一个非常强大的指令，它用于动态地绑定一个或多个属性：
简单来说，v-bind 可以将数据绑定到DOM元素的属性上，Vue实例的数据属性会与DOM元素的属性保持同步；
- 图片，它的
src属性值，是一个图片地址，通过v-bind动态绑定，更便捷的操作属性； v-bind:属性可以简写:属性<img v-bind:src="list[index]" alt="">、< img :src="list[index]" alt="" >
对 class 的增强：
- 对象语法： 当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类；
- 数组语法： 当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表；
对 style 的增强：
支持使用对象语法来绑定内联样式：对象的键是CSS属性名，值是CSS属性值；
🚸注意： 因为语法是：:style="{JS对象形式}"，所以要注意符合JS的语法规范 font-size 需要定义：fontSize
but，因为是JS对象，所以内部也支持使用表达式写法： 三元运算符、字符拼接、...
<div id="root">
<p :style="{ fontSize: fontSize+'px', color: color[colorindex] }" >Hello World🌏</p>
<button @click="fontSize = 25">设置25PX</button>
<button @click="fontSize = 50">设置50PX</button>
<button @click="colorindex=colorindex>2?0:colorindex+1">字体随机变色</button>
</div>
<script>
const vm = new Vue({
el:"#root",
data:{
fontSize: 12,
colorindex: 0,
color: ['red','green','blue'],
}
});
</script>
列表渲染指令：
在Vue.js中，v-for是一个用于基于数组渲染列表的指令： 它允许你遍历数组或对象，并为每个项生成模板中的元素；
-
语法：
(item, index) in arr：arr是被遍历的数组、item是数组中的每一项；index是每一项的索引，不需要可以省略；此语法也可以遍历对象和数字：<p v-for="item in 10">{{item}}</p>
<div id="root">
<ul>
<li v-for="(todo,index) in todos" :key="todo.id">
<span>{{ todo.name }}</span>
<span>{{ todo.author }}</span>
<button @click="del(todo.id)">删除</button>
</li>
</ul>
</div>
<script>
const vm = new Vue({
el:"#root",
data:{
todos: [
{ id: 1, name: '《红楼梦》', author: '曹雪芹' },
{ id: 2, name: '《西游记》', author: '吴承恩' },
{ id: 3, name: '《水浒传》', author: '施耐庵' },
{ id: 4, name: '《三国演义》', author: '罗贯中' }
]
},
methods: {
del (id) {
this.todos = this.todos.filter(item => item.id !== id);
}
}
});
</script>
v-for中的key
关于key： 如下操作，未设置key的标签项，删除并没有删除元素DOM，更像是数据重新渲染了一遍；
导致原DOM样式还存在，也正因为如此，有人说是Bug🐞，可我觉得这个是一个特殊机制；
⚠️注意：key 的值只能是字符串 或 数字类型，必须具有唯一性🆔
key是一个非常重要的属性，它用于给每个渲染出来的元素一个独一无二的标识：
这个标识帮助Vue.js更高效地更新虚拟DOM，特别是在处理动态列表时，Vue的虚拟DOM算法中：
key用于优化新旧节点的对比过程，Vue可以更快地找到对应的节点，减少不必要的元素创建和销毁；- 如果没有
key，Vue默认使用就地复用策略，这可能会导致一些问题，比如表单控件的状态可能会被错误地保留；
双向绑定指令：
v-model是一个非常强大的指令，用于在表单输入和应用状态之间创建双向绑定：
这意味着，当你在输入框中键入内容时，绑定的数据会自动更新；反之，当更新数据时，输入框的内容也会相应变化；
这样，无论何时更改输入框中的内容，
v-model属性都会实时更新，
属性的值在其他地方被更改，输入框中的内容也会立即反映这个变化；
v-model其他表单元素的使用：
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素：
关于单选按钮：
name给单选框加上 name 属性 可以分组 → 同一组互相会互斥；value给单选框加上 value 属性，用于提交给后台的数据；
关于多选按钮：
option需要设置 value 值，提交给后台select的value值，关联了选中的 option 的 value 值，在v-model绑定属性设置值则默认选择|刷新值；
<div id="root">
<h3>小黑学习网</h3>
<br>姓名：<input type="text" v-model="username"><br>
<br>单身：<input type="checkbox" v-model="isSingle"><br>
<br>性别:
<input v-model="gender" type="radio" name="gender" value="1">男
<input v-model="gender" type="radio" name="gender" value="2">女 <br>
<br>所在城市:
<select v-model="cityId">
<option value="101">北京</option> <option value="102">上海</option>
<option value="103">成都</option> <option value="104">南京</option>
</select><br>
<br>自我描述：<textarea v-model="desc"></textarea>
</div>
<script>
const app = new Vue({
el: '#root',
data: {
username: '',
isSingle: false,
desc: "",
gender: "2", //默认选择: 2 女
cityId: '102', //默认选择: 102 上海
}
})
</script>
指令修饰符：
指令修饰符是一种特殊的后缀，用于表示指令应该以特定方式绑定到元素上，修饰符可以用来修改指令的默认行为：
事件修饰符
事件修饰符是用于v-on指令来监听事件的特殊后缀： 用于指示Vue在监听DOM事件时自动执行某些操作：
这些修饰符可以附加到 v-on 指令后面，使得事件处理更加简洁和易于管理，常用的事件修饰符：
@事件名.stop阻止事件冒泡，内部隐藏调用：event.stopPropagation()@事件名.prevent来阻止事件的默认行为，内部隐藏调用event.preventDefault()@事件名.stop.prevent可以连用，即阻止事件冒泡也阻止默认行为，什么是事件冒泡🗫🗫：
事件冒泡是DOM（文档对象模型）事件传播的一种机制，当一个事件在一个元素上触发时，它会沿着DOM树向上冒泡
也就是说，它会依次触发其父元素、祖父元素，一直到根元素的事件处理程序；
@事件名.stop 阻止事件冒泡
<div id="root" >
<h3>@事件冒泡: </h3>
<div @click="fatherFn" class="father">
<div @click.stop="sonFn" class="son">儿子</div>
</div>
</div>
<script>
const vm = new Vue({
el:"#root",
methods:{
fatherFn () {
alert('老父亲被点击了');
},
sonFn (e) {
// e.stopPropagation(); 原始解决事件冒泡;
alert('儿子被点击了');
}
}
});
</script>
按键修饰符
按键修饰符是事件修饰符的一种用于监听键盘事件的特殊后缀： 它们允许你指定在按下特定键时才触发方法；
通常结合keyup事件使用： 它是一个键盘事件，它会在用户释放按键时触发；
你可以直接在元素上使用： v-on:keyup或@keyup来监听键盘抬起事件；
结合按键修饰符，可以事半功倍效果； 常用的按键修饰符⏬
@keyup.enter当用户按下回车键时触发；@keyup.tab: 当用户按下Tab键时触发；@keyup.esc: 当用户按下Esc键时触发；
<div id="root" >
<p>keyup键盘事件: <input @keyup="fun1" v-model="ent1" type="text"><br></p>
<p>原始Enter触发事件: <input @keyup="fun2" v-model="ent2" type="text"><br></p>
<p>@keyup.enter 指令修饰符: <input @keyup.enter="fun3" v-model="ent3" type="text"><br></p>
</div>
<script>
const vm = new Vue({
el:"#root",
data:{
ent1:"",
ent2:"",
ent3:"",
},
methods:{
fun1(){ //@keyup:键盘事件: 每次按键都会触发;
console.log('键盘触发事件:', this.ent1);
},
fun2(event){ //原始Enter触发事件: 需获取$event对象判断按键是否是回车;
if (event.keyCode === 13 || event.key === 'Enter'){
console.log('键盘触发事件:', this.ent2);
}
},
fun3(){ //@keyup.enter 指令修饰符,修改指令的默认行为,提供更便携的操作;
console.log('指令修饰符键盘触发事件:', this.ent3);
}
}
});
</script>
v-model修饰符
v-model还提供了一些修饰符来处理常见的需求： .指明一些指令后缀，不同的后缀，封装了不同的处理操作；
v-model.number：输入字符串转为数字，如果输入非数值，则转换字符串；v-model.trim自动去除输入首尾的空白字符；
😁😁很简单哒，就不展示了
计算属性🔢
Vue的计算属性Computed 是一种非常强大的功能： 它用于声明式地描述一个值如何依赖其他数据
计算属性基于它们的依赖进行缓存，并且只有当依赖项发生变化时，它们才会重新计算；
computed计算属性🆚method函数：
虽然你可以使用方法来达到相同的效果，但计算属性在性能上通常更优，因为它们会基于响应式依赖被缓存
只有当相关依赖发生变化时，计算属性才会重新计算，相比之下，每次重新渲染时，方法都会重新执行；
计算属性，method不能比的是： 它支持获取、修改set 自定义规则，并监听触发；
注意事项：
computed配置项和data配置项是同级的，不能和data中的属性同名，计算属性内部的this依然指向的是Vue实例
computed中的计算属性虽然是函数的写法，但他依然是个属性，所以是属性的调用方式；
<div id="root">
姓：<input type="text" v-model="firstName"> +
名：<input type="text" v-model="lastName"> =
<span>{{ fullName }}</span> <input type="text" v-model="fullName"><br><br>
<button>计算属性,反操作计算参数值</button> : <input type="text" v-model="fullName2">
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
},
computed: {
fullName(){
//方式一: 纯计算属性,return 通过特定规则的返回值;
return this.firstName + this.lastName;
},
fullName2: {
//方式二: 计算属性还支持修改,并根据规则反渲染,计算的参数值;
get(){ return this.firstName + this.lastName; }, //get获取计算属性值;
set(value){ //set修改计算属性值,并触发事件反操作计算参数;
this.firstName = value.slice(0, 1); //根据计算属性修改的值,反操作计算参数;
this.lastName = value.slice(1);
}
}
}
});
</script>
监听属性👁️🗨️
Vue.js中，watch 是一个非常有用的选项，它允许你监听Vue实例上的数据变动：
当你需要在数据变化时执行一些操作，比如异步请求、深度响应、或是复杂的逻辑，watch 就显得尤为重要；
<div id="root">
监听普通属性: <input type="text" v-model="wat1">
监听对象属性: <input ype="text" v-model="watobj.one">
<h1>监听属性高级操作: </h1>
监听全对象属性,且默认开启触发:
one属性: <input ype="text" v-model="watobj.one"> two属性: <input ype="text" v-model="watobj.two">
</div>
<script>
const vm = new Vue({
el: "#root",
data: {
wat1: "",
watobj: {
one: "",
two: "",
}
},
watch: {
//监听wat1
wat1(newValue,oldValue){ console.log("数据发送改变: "+oldValue+">新数据>"+newValue); },
//监听watobj 对象 one属性,因为是对象类型,所以 "监听函数名" 需要;
"watobj.one"(newValue){
console.log("因为不经常使用老数据(可省略),新数据是: "+newValue);
},
//监听属性高级操作: 监听全对象属性,且默认开启触发;
watobj: {
deep: true, // 深度监视,监听对象全属性;
immediate: true, // 立刻执行，一进入页面handler就立刻执行一次;
handler (newValue){ // newValue,表示的是整个新对象的内容;
console.log("高级监听: 数据更新触发——>"+newValue);
}
}
}
});
</script>
注意事项：
-
深度监听会增加性能开销，因为它需要遍历对象的所有属性；
-
watch默认是懒执行的，只有在侦听的源发生变化时，才会执行回调如果你希望回调在创建侦听器时立即执行，可以使用
immediate: true选项
