位置: IT常识 - 正文
Vue2进阶笔记(vue2.)
编辑：rootadmin推荐整理分享Vue2进阶笔记(vue2.)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue2实践揭秘,vue进阶教程,vue2入门,vue2教程,vue2.0教程,vue2入门,vue进阶教程,vue2入门,内容如对您有帮助，希望把文章链接给更多的朋友！
Vue2进阶笔记，受益于尚硅谷天禹老师课程，在此表示感谢，全文共三万余字。
一、基础知识tips: 1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。 2、所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等)，最好写成箭头函数这样this的指向才是vm或组件实例对象。
1.1 computed计算属性在computed中，可以定义一些属性，即计算属性。计算属性具有缓存功能，相比较methods效率更高。 计算属性本质是方法，只是在使用这些计算属性的时候，把他们的名称直接当作属性来使用，并不会把计算属性当作方法去调用，不需要加小括号()调用。 计算属性的求值结果会被缓存起来，方便下次直接使用（多次调用只要内部数据不改变就不会重新求值，改变了也只会计算一次，虽然有多个地方引用此属性）。getter方法内部无论如何都要return出去一个值。
<body> <div id="app"> <h1>计算属性：computed的getter/setter</h1> <br/> 姓：<input type="text" v-model="firstName"> <br/> 名：<input type="text" v-model="lastName"> <br/> 全名：<input type="text" v-model="fullName">> </div> <script> var app = new Vue({ el:"#app", data:{ firstName:"zhang", lastName:"san", }, computed: { /* 完全写法，可读可修改 fullName:{ get:function(){ return this.firstName + "-" + this.lastName }, set:function(value){ var list = value.split(' '); this.firstName=list[0] this.lastName=list[1] } } */ // 只读不修改，只有getter没有setter，简写 fullName(){ return this.firstName + "-" + this.lastName } }, }); </script> </body>
注意：计算属性可以传参，但是不能直接传参。
但是在实际开发中我们会更多地使用计算属性，因为计算属性会进行缓存，多次使用时，计算属性只会调用一次。
<p>班级：{{ getClassName(item.faceClass) }}</p>// ...// 正确写法 返回的是一个函数computed: { getClassName() { return function (classId) { const element = this.classList; for (let index = 0; index < element.length; index++) { if (element[index].classId == classId) { return element[index].className; } } }; }, },如果直接传参则会提示错误：>TypeError: songerName is not a function
// 错误写法computed: { songName(classId) { const element = this.classList; for (let index = 0; index < element.length; index++) { if (element[index].classId == classId) { return element[index].className; } } }}1.2 watch监视属性Watch概述 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。 深度监视: (1). Vue中的watch默认不监测对象内部值的改变（一层）。 (2). 配置deep:true可以监测对象内部值改变(多层）。 备注: (1). Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以! (2). 使用watch时根据数据的具体结构,决定是否采用深度监视。
简单的监听
<body><div id="app"> <input type="text" v-model="num"></div><script src="vue.js"></script><script> const vm = new Vue({ el: '#app', data: { num: '' }, // 创建vue实例时就知道需要监视那个数据项，用这种方法 watch: { // 不考虑immediate和deep只有hander一个配置项时，可以简写 num(newVal, oldVal) { // 监听 num 属性的数据变化 // 作用 : 只要 num 的值发生变化,这个方法就会被调用 // 第一个参数 : 新值 // 第二个参数 : 旧值,之前的值 console.log('oldVal:',oldVal) console.log('newVal:',newVal) } }, // 正常写法 根据用户行为，方才知道那个数据项需要监视，用这种方法 vm.$watch('num',{ // 每个属性值发生变化就会调用这个函数 handler(newVal, oldVal) { console.log('oldVal:', oldVal) console.log('newVal:', newVal) }, // 立即处理 进入页面就触发 immediate: true, // 深度监听 监视多级结构中所有属性的变化 deep: true } })// 不考虑immediate和deep只有hander一个配置项时，可以简写 vm.$watch('num',function(newVal, oldVal) { console.log('oldVal:', oldVal) console.log('newVal:', newVal) })</script></body>immediate（立即处理 进入页面就触发） deep（深度监听） 对象和数组都是引用类型，引用类型变量存的是地址，地址没有变，所以不会触发watch。这时我们需要进行深度监听，就需要加上一个属性 deep，值为 true。
<body><div id="app"> <input type="button" value="更改名字" @click="change"></div><script src="vue.js"></script><script> new Vue({ el: '#app', data: { food: { id: 1, name: '冰激凌' } }, methods: { change() { this.food.name = '棒棒糖' } }, watch: { // 完整写法 // 第一种方式：监听整个对象，每个属性值的变化都会执行handler // 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的 food: { // 每个属性值发生变化就会调用这个函数 handler(newVal, oldVal) { console.log('oldVal:', oldVal) console.log('newVal:', newVal) }, // 立即处理 进入页面就触发 immediate: true, // 深度监听 监视多级结构中所有属性的变化 deep: true }, // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数 // 函数执行后，获取的 newVal 值和 oldVal 值不一样 'food.name'(newVal, oldVal) { console.log('oldVal:', oldVal) // 冰激凌 console.log('newVal:', newVal) // 棒棒糖 } } })</script></body>Watch和computed的区别
1、 computed支持缓存，只有依赖数据发生改变，才会重新进行计算；而watch不支持缓存，数据变，直接会触发相应的操作。 2、computed不支持异步，当computed内有异步操作时无效，无法监听数据的变化，而watch支持异步。 3、computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中
下一篇：常用的优化器合集(优化器总结)
