懂个锤子Vue
原创
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案例 ：
添加图片注释，不超过 140 字（可选）
本篇文章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="" >
v-bind对样式控制的增强：
v-bind 在Vue.js中对样式控制提供了强大的增强功能，特别是在处理 class 和 style 时：
这些增强功能使得根据数据动态设置元素的类和样式变得非常简单和直观；
对 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 选项
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
