数据，方法，计算属性和侦听器 · vue笔记

[TOC] >[success] # 数据，方法，计算属性和侦听器本章将主要讲解 **data** 、 **methods** 、 **computed** 、 **watcher** >[success] ## data 之前使用的 **data** 中的数据，我们可以 **通过控制台** 来对 **data** 中的 **数据进行修改** ，例如： ~~~ vm.$data.message = '123' ~~~ 这样就可以把 **data** 中的数据 **修改** 了，还有一个更简便的方式 ~~~ vm.message = '123' ~~~ 这样也是可以修改的。 >[success] ## methods **定义方法** 可以在 **methods** 中定义，但是这里需要注意 **methods** 中的方法的 **this指向** ，都是指向**vue的实例** ，**定义方法时候不可以用箭头函数的方式定义方法，因为箭头函数的this指向的是外层对象的this** 。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据，方法，计算属性和侦听器</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, methods: { handleClick(){ console.log('click', this.message) } }, template: ` <div @click="handleClick">{{message}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ **methods** 也可以这样用，这种用法叫做 **插值表达式** ，如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据，方法，计算属性和侦听器</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ message: 'hello world' } }, methods: { formatString(string){ return string.toUpperCase() } }, template: ` <div>{{formatString(message)}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ >[success] ## computed **computed** 用来 **计算值**，最终 **返回一个计算后的结果** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据，方法，计算属性和侦听器</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> const app = Vue.createApp({ data(){ return{ count: 2, price: 5 } }, computed: { total(){ return this.count * this.price } }, template: ` <div>{{ total }}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 那么有人说了用 **methods** 能实现与 **computed** 同样的效果，实际上它俩还是有不同的， **computed** ：**当计算属性依赖的内容发生变更时，才会重新执行计算** **methods**：**只要页面重新渲染，才会重新计算** >[success] ## watch **应用场景**：**监听数据变化时，做一些逻辑处理** **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据，方法，计算属性和侦听器</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存 // computed 和 watcher 都能实现的功能，建议使用 computed 因为更加简洁 const app = Vue.createApp({ data(){ return{ count: 2, price: 5, newTotal: 10 } }, watch:{ // price 发生变化时，函数会执行 price(current, prev){ this.newTotal = current * this.count } }, template: ` <div>{{newTotal}}</div> ` }) const vm = app.mount('#root') </script> </html> ~~~