Vue学习笔记
2022/1/24 6:04:34
本文主要是介绍Vue学习笔记，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
本次Vue学习基于尚硅谷天禹老师的视频课程。
官方文档：https://cn.vuejs.org/v2/guide/
1、初识Vue
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue的特点：
1、采用组件化模式，提高代码的复用率，让代码更好维护；
2、声明式编码，让编码人员无需直接操作DOM，提高开发效率；
3、使用虚拟DOM和优秀的Diff算法，尽量复用DOM节点；
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>初识Vue</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
9 </head>
10 <body>
11 <!--
12 前置：
13 1、强制刷新shift+F5
14 2、解决网页标签favicon.ico缺失的问题，内部服务器
15 3、new Vue({这里是配置对象，要用专有名词，如el，methods})
16 初识Vue：
17 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
18 2.app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
19 3.app容器里的代码被称为【Vue模板】，模板会被vue实例解析成正常的html然后挂载到容器里；
20 4.Vue实例和容器是一一对应的，一对一的关系；
21 5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
22 6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
23 7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
24
25 注意区分：js表达式 和 js代码(语句)
26 1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
27 (1). a
28 (2). a+b
29 (3). demo(1)
30 (4). x === y ? 'a' : 'b'
31 2.js代码(语句)
32 (1). if(){}
33 (2). for(){}
34 -->
35
36 <!-- 准备好一个容器 -->
37 <div id="app">
38 <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
39 </div>
40
41 <script type="text/javascript" >
42 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
43
44 //创建Vue实例
45 //new不可少，Vue本身是个构造函数，不能直接调用，必须通过实例来调用
46 new Vue({ //通过构造函数创建实例
47 el:'#app', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
48 data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
49 name:'waylon',
50 address:'上海'
51 }
52 })
53
54 </script>
55 </body>
56 </html>
2、模板语法
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>模板语法</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!--
11 Vue模板语法有2大类：
12 1.插值语法：
13 功能：用于解析 标签体 内容。
14 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
15 2.指令语法：
16 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
17 举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，
18 且可以直接读取到data中的所有属性。
19 备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。
20
21 -->
22 <!-- 准备好一个容器-->
23 <div id="root">
24 <h1>插值语法</h1>
25 <h3>你好，{{name}}</h3>
26 <hr/>
27 <h1>指令语法</h1>
28 <!-- 添加v-bind:之后就会把=右边的字符串当成js表达式去执行 -->
29 <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
30 <a :href="school.url" :x="hello">点我去{{school.name}}学习2</a>
31 </div>
32 </body>
33
34 <script type="text/javascript">
35 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
36
37 new Vue({
38 el:'#root',
39 data:{
40 hello:'嘻嘻',
41 name:'jack',
42 school:{
43 name:'尚硅谷', //虽然同名，但不同级
44 url:'http://www.atguigu.com',
45 }
46 }
47 })
48 </script>
49 </html>
3、数据绑定
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>数据绑定</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!--
11 Vue中有2种数据绑定的方式：
12 1.单向绑定(v-bind)：数据只能从data流向页面。
13 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。
14 备注：
15 1.双向绑定一般都应用在表单类元素上（如：input、select等）
16 2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
17 -->
18 <!-- 准备好一个容器-->
19 <div id="root">
20 <!-- 普通写法: -->
21 <!--
22 单向数据绑定：<input type="text" v-bind:value="name"><br/>
23 双向数据绑定：<input type="text" v-model:value="name"><br/>
24 -->
25
26 <!-- 简写: -->
27 单向数据绑定：<input type="text" :value="name"><br/>
28 双向数据绑定：<input type="text" v-model="name"><br/>
29
30 <!-- 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上 -->
31 <!-- <h2 v-model:x="name">你好啊</h2> -->
32 </div>
33 </body>
34
35 <script type="text/javascript">
36 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
37
38 new Vue({
39 el:'#root',
40 data:{
41 name:'尚硅谷'
42 }
43 })
44 </script>
45 </html>
4、el与data的两种写法
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>el与data的两种写法</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!--
11 data与el的2种写法
12 1.el有2种写法
13 (1).new Vue时候配置el属性。
14 (2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
15 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可
16 以使用 vm.$mount() 手动地挂载一个未挂载的实例。
17 2.data有2种写法
18 (1).对象式
19 (2).函数式
20 如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
21 3.一个重要的原则：
22 由Vue管理的函数，如data(),一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了,而是Window
23 -->
24 <!-- 准备好一个容器-->
25 <div id="root">
26 <h1>你好，{{name}}</h1>
27 </div>
28 </body>
29
30 <script type="text/javascript">
31 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
32
33 //el的两种写法
34 /*
35 const vm = new Vue({
36 // el:'#root', //第一种写法
37 data:{
38 name:'尚硅谷'
39 }
40 })
41 console.log(vm)
42 vm.$mount('#root') //第二种写法,mount意为：挂载
43 */
44
45 // data的两种写法
46 const vm = new Vue({
47 el:'#root',
48 //data的第一种写法：对象式
49 /* data:{
50 name:'尚硅谷'
51 } */
52
53 //data的第二种写法：函数式
54 data(){ //即data:function(){}的简写
55 console.log('@@@',this) //此处的this是Vue实例对象
56 return{
57 name:'尚硅谷'
58 }
59 }
60 })
61 </script>
62 </html>
5、Vue中的MVVM模型
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>理解MVVM</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!--
11 MVVM模型
12 1. M：模型(Model) ：data中的数据 ————>js对象
13 2. V：视图(View) ：模板代码 ————>DOM
14 3. VM：视图模型(ViewModel)：Vue实例
15 观察发现：
16 1.data中所有的属性，最后都出现在了vm身上。
17 2.vm身上所有的属性 及 Vue原型[Prototype]上所有属性，在Vue模板中都可以直接使用。
18 -->
19 <div id="root">
20 <h1>学校名称：{{name}}</h1>
21 <h1>学校地址：{{address}}</h1>
22 <!-- <h1>测试一下1：{{1+1}}</h1>
23 <h1>测试一下2：{{$options}}</h1>
24 <h1>测试一下3：{{$emit}}</h1>
25 <h1>测试一下4：{{_c}}</h1> -->
26 </div>
27 </body>
28
29 <script type="text/javascript">
30
31 const vm = new Vue({
32 el:'#root',
33 data:{
34 name:'尚硅谷',
35 address:'北京',
36 }
37 })
38 console.log(vm)
39 </script>
40 </html>
Vue的实例对象vm：
MVVM在vue中的体现：
6、数据代理
1、关于Object.defineproperty方法
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>关于Object.defineproperty方法</title>
6 </head>
7 <body>
8 <script type="text/javascript">
9 let number = 18
10 let person = {
11 name:'张三',
12 sex:'男',
13 }
14
15 Object.defineProperty(person,'age',{
16 // value:18,
17 // enumerable:true, //控制属性是否可以枚举，默认值是false
18 // writable:true, //控制属性是否可以被修改，默认值是false
19 // configurable:true //控制属性是否可以被删除，默认值是false
20
21 //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
22 get(){
23 console.log('有人读取age属性了')
24 return number
25 },
26
27 //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
28 set(value){
29 console.log('有人修改了age属性，且值是',value)
30 number = value
31 }
32 //getter和setter将person和number两者产生了关联
33 })
34 // console.log(Object.keys(person)) //将对象的属性名提取出来组成一个数组
35
36 console.log(person)
37 52 </script>
53 </body>
54 </html>
2、何为数据代理？
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>何为数据代理</title>
6 </head>
7 <body>
8
9 <!-- 数据代理：通过一个对象实现对另一个对象中属性的（读/写）操作 -->
10 <script type="text/javascript" >
11 let obj = {x:100}
12 let obj2 = {y:200}
13
14 Object.defineProperty(obj2,'x',{
15 get(){
16 return obj.x
17 },
18 set(value){
19 obj.x = value
20 }
21 })
22 </script>
23 </body>
24 </html>
3、在Vue中的数据代理如何实现？
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Vue中的数据代理</title>
6 <script type="text/javascript" src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <h1>个人姓名：{{name}}</h1>
11 <h1>个人年龄：{{age}}</h1>
12 </div>
13 <script type="text/javascript">
14 const vm = new Vue({
15 el:"#app",
16 data:{
17 name:'天青色',
18 age:18
19 }
20 })
21 </script>
22 </body>
23 </html>
在上面这段代码中，data属性是个对象，可以通过实例对象vm去操作data中的键值对，如下：
这不就是数据代理吗？通过一个对象实现对另一个对象中属性的（读/写）操作 。这点可以从vm实例对象下面的name属性看出来，将鼠标光标移到上面显示 Invoke property getter，表示读取属性值时要通过getter实现。
name和age都是有自己的getter和setter：
其实在vm实例对象下面有个_data属性，里面保存了data里的键值对，可以通过vm._data来进行读写操作：
vm下面的name和age就是通过数据代理与_data中的name和age建立了联系，如果没有这层联系，那模板中{{name}}就不能直接拿到_data中的name了，而应该是{{ _data.name }}才可以。而_data数据又来自于data，所以vm就很方便的代理操作了data。
尚硅谷老师的图也讲得很清楚：
补充一点，_data里还实现了数据劫持。当我们通过vm.name更改值时，页面上用到name的地方也会自动响应式更新了。这就是_data里数据劫持的作用。
总结：
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
7、事件处理
8、计算属性
先实现一个小案例：
输入框默认有张和三，手动输入后全名也会跟着改变。
1、通过插值语法实现案例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>姓名案例_插值语法实现</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!-- 准备好一个容器-->
11 <div id="root">
12 姓：<input type="text" v-model="firstName"> <br/><br/>
13 名：<input type="text" v-model="lastName"> <br/><br/>
14 全名：<span>{{firstName}}-{{lastName}}</span>
15 </div>
16 </body>
17
18 <script type="text/javascript">
19 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
20
21 new Vue({
22 el:'#root',
23 data:{
24 firstName:'张',
25 lastName:'三'
26 }
27 })
28 </script>
29 </html>
2、通过methods实现案例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>姓名案例_methods实现</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!-- 准备好一个容器-->
11 <div id="root">
12 姓：<input type="text" v-model="firstName"> <br/><br/>
13 名：<input type="text" v-model="lastName"> <br/><br/>
14 全名：<span>{{fullName()}}</span>
15 </div>
16 </body>
17
18 <script type="text/javascript">
19 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
20
21 new Vue({
22 el:'#root',
23 data:{
24 firstName:'张',
25 lastName:'三'
26 },
27 methods: {
28 fullName(){
29 console.log('@---fullName')
30 return this.firstName + '-' + this.lastName
31 }
32 },
33 })
34 </script>
35 </html>
注意14行的{{fullName()}}是要加()的。
另外，由于是双向数据绑定，每次输入都会导致data对象里面的属性值发生改变，从而会使得模板代码被Vue重新渲染，fullName方法也会被重新调用。如下：
3、通过计算属性实现案例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>姓名案例_计算属性实现</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
21 <!-- 准备好一个容器-->
22 <div id="root">
23 姓：<input type="text" v-model="firstName"> <br/><br/>
24 名：<input type="text" v-model="lastName"> <br/><br/>
25 测试：<input type="text" v-model="x"> <br/><br/>
26 全名：<span>{{fullName}}</span> <br/><br/>
27 <!-- 全名：<span>{{fullName}}</span> <br/><br/>
28 全名：<span>{{fullName}}</span> <br/><br/>
29 全名：<span>{{fullName}}</span> -->
30 </div>
31 </body>
32
33 <script type="text/javascript">
34 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
35
36 const vm = new Vue({
37 el:'#root',
38 data:{
39 firstName:'张',
40 lastName:'三',
41 x:'你好'
42 },
43 methods: {
44 demo(){
45
46 }
47 },
48 computed:{
49 fullName:{
50 //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
51 //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
52 get(){
53 console.log('get被调用了')
54 // console.log(this) //经过Vue的处理后此处的this是vm
55 return this.firstName + '-' + this.lastName
56 },
57 //set什么时候调用? 当fullName被修改时。
58 set(value){
59 console.log('set',value)
60 const arr = value.split('-')
61 this.firstName = arr[0]
62 this.lastName = arr[1]
63 }
64 }
65 }
66 })
67 </script>
68 </html>
总结：
1.定义：要用的属性不存在，要通过已有属性（如data对象里的属性）计算得来。它也是vm下面的一个属性。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.计算属性最终会出现在vm上，直接插值法读取使用即可。
6.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
4、计算属性的简写
当只考虑计算属性的读取不考虑修改的时候，就可以简写：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>姓名案例_计算属性实现</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!-- 准备好一个容器-->
11 <div id="root">
12 姓：<input type="text" v-model="firstName"> <br/><br/>
13 名：<input type="text" v-model="lastName"> <br/><br/>
14 全名：<span>{{fullName}}</span> <br/><br/>
15 </div>
16 </body>
17
18 <script type="text/javascript">
19 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
20
21 const vm = new Vue({
22 el:'#root',
23 data:{
24 firstName:'张',
25 lastName:'三',
26 },
27 computed:{
28 //完整写法
29 /* fullName:{
30 get(){
31 console.log('get被调用了')
32 return this.firstName + '-' + this.lastName
33 },
34 set(value){
35 console.log('set',value)
36 const arr = value.split('-')
37 this.firstName = arr[0]
38 this.lastName = arr[1]
39 }
40 } */
41 //简写
42 fullName(){
43 console.log('get被调用了')
44 return this.firstName + '-' + this.lastName
45 }
46 }
47 })
48 </script>
49 </html>
读取的时候依然是 {{计算属性}} ，不可加() 。
9、监视属性
实现天气小案例：
默认炎热，点击后切换为凉爽，再点击切换为炎热。
1、实现案例
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 <script type="text/javascript" src="js/vue.js"></script>
7 </head>
8 <body>
9 <div id="app">
10 <h1>今天的天气很{{weather}}</h1>
11 <button type="button" @click="changeWeather">点我切换天气</button>
12 <!-- <button type="button" @click="ishot=!ishot;x其他代码x">点我切换天气</button> -->
13 <!-- <button type="button" @click="window.alert('点击成功')">点我切换天气</button> -->
14 <!-- 在绑定事件的时候，@xxx='yyy',这里的yyy可以写一些简单的语句，复杂的话就交给methods -->
15 </div>
16 <script type="text/javascript">
17 const vm = new Vue({
18 el:'#app',
19 data:{
20 ishot:true,
21 // window 点击事件里的window在vm里找不到，所以要在这添加window，不然会报错
22 },
23 methods:{
24 changeWeather(){
25 this.ishot = !this.ishot
26 }
27 },
28 computed:{
29 weather(){
30 return this.ishot ? '炎热' : '凉爽'
31 }
32 }
33 })
34 </script>
35 </body>
36 </html>
2、监视属性watch
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>天气案例_监视属性</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!-- 准备好一个容器-->
11 <div id="root">
12 <h2>今天天气很{{info}}</h2>
13 <button @click="changeWeather">切换天气</button>
14 </div>
15 </body>
16
17 <script type="text/javascript">
18 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
19
20 const vm = new Vue({
21 el:'#root',
22 data:{
23 isHot:true,
24 },
25 computed:{
26 info(){
27 return this.isHot ? '炎热' : '凉爽'
28 }
29 },
30 methods: {
31 changeWeather(){
32 this.isHot = !this.isHot
33 }
34 },
35 /* watch:{
36 isHot:{
37 immediate:true, //初始化时让handler调用一下
38 //handler什么时候调用？当isHot发生改变时。
39 handler(newValue,oldValue){
40 console.log('isHot被修改了',newValue,oldValue)
41 }
42 }
43 } */
44 })
45
46 vm.$watch('isHot',{
47 immediate:true, //初始化时让handler调用一下
48 //handler什么时候调用？当isHot发生改变时。
49 handler(newValue,oldValue){
50 console.log('isHot被修改了',newValue,oldValue)
51 }
52 })
53 </script>
54 </html>
总结：
监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！可以使data里的属性，也可以是计算属性
3.监视的两种写法：
(1).new Vue时传入watch配置（初期明确知道需要监视）
(2).通过vm.$watch监视（后期需求添加的监视）
3、深度监视deep
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>天气案例_深度监视</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!-- 准备好一个容器-->
11 <div id="root">
12 <h2>今天天气很{{info}}</h2>
13 <button @click="changeWeather">切换天气</button>
14 <hr/>
15 <h3>a的值是:{{numbers.a}}</h3>
16 <button @click="numbers.a++">点我让a+1</button>
17 <h3>b的值是:{{numbers.b}}</h3>
18 <button @click="numbers.b++">点我让b+1</button>
19 <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
20 <!-- {{numbers.c.d.e}} -->
21 </div>
22 </body>
23
24 <script type="text/javascript">
25 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
26
27 const vm = new Vue({
28 el:'#root',
29 data:{
30 isHot:true,
31 numbers:{
32 a:1,
33 b:1,
34 c:{
35 d:{
36 e:100
37 }
38 }
39 }
40 },
41 computed:{
42 info(){
43 return this.isHot ? '炎热' : '凉爽'
44 }
45 },
46 methods: {
47 changeWeather(){
48 this.isHot = !this.isHot
49 }
50 },
51 watch:{
52 isHot:{
53 // immediate:true, //初始化时让handler调用一下
54 //handler什么时候调用？当isHot发生改变时。
55 handler(newValue,oldValue){
56 console.log('isHot被修改了',newValue,oldValue)
57 }
58 },
59 //监视多级结构中某个属性的变化，注意要用引号，之前isHot是简写
60 /* 'numbers.a':{
61 handler(){
62 console.log('a被改变了')
63 }
64 } */
65 //监视多级结构中所有属性的变化
66 numbers:{
67 deep:true, //默认为false，开启深度监视
68 handler(){
69 console.log('numbers改变了')
70 }
71 }
72 }
73 })
74
75 </script>
76 </html>
总结：
深度监视：
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
(3).Vue自身可以监测对象内部值的改变，无论有多少层，如numbers.c.d.e，但Vue提供的watch默认不可以！
(4).考虑到效率性，使用watch时根据数据的具体结构，决定是否采用深度监视。
4、监视属性简写
当监视某个属性而不需要配置immediate和deep时，可以使用简写形式，类似于计算属性的简写：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>天气案例_监视属性_简写</title>
6 <!-- 引入Vue -->
7 <script type="text/javascript" src="js/vue.js"></script>
8 </head>
9 <body>
10 <!-- 准备好一个容器-->
11 <div id="root">
12 <h2>今天天气很{{info}}</h2>
13 <button @click="changeWeather">切换天气</button>
14 </div>
15 </body>
16
17 <script type="text/javascript">
18 Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
19
20 const vm = new Vue({
21 el:'#root',
22 data:{
23 isHot:true,
24 },
25 computed:{
26 info(){
27 return this.isHot ? '炎热' : '凉爽'
28 }
29 },
30 methods: {
31 changeWeather(){
32 this.isHot = !this.isHot
33 }
34 },
35 watch:{
36 //正常写法
37 /* isHot:{
38 // immediate:true, //初始化时让handler调用一下
39 // deep:true,//深度监视
40 handler(newValue,oldValue){
41 console.log('isHot被修改了',newValue,oldValue)
42 }
43 }, */
44 //简写
45 /* isHot(newValue,oldValue){
46 console.log('isHot被修改了',newValue,oldValue,this)
47 } */
48 }
49 })
50
51 //正常写法
52 /* vm.$watch('isHot',{
53 immediate:true, //初始化时让handler调用一下
54 deep:true,//深度监视
55 handler(newValue,oldValue){
56 console.log('isHot被修改了',newValue,oldValue)
57 }
58 }) */
59
60 //简写
61 /* vm.$watch('isHot',(newValue,oldValue)=>{
62 console.log('isHot被修改了',newValue,oldValue,this)
63 }) */
64
65 </script>
66 </html>
11
这篇关于Vue学习笔记的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16Vue3资料：新手入门必读教程
- 2024-11-16Vue3资料：新手入门全面指南
- 2024-11-16Vue资料：新手入门完全指南
- 2024-11-16Vue项目实战：新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解：React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南：从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习：新手入门教程与实践指南
- 2024-11-16Vue3学习：从入门到初级实战教程
