09-15计算属性和侦听器

计算属性和监听器

computed计算属性

watch 侦听属性

methods

computed示例

<!DOCTYPE html> <html>

<head>

<metacharset="utf-8">

<title></title>

<scriptsrc="js/vue.min.js"></script></head>

<body>

<divid="example">

<p>Original message: "{{ message }}"</p>

<p>Computed reversed message: "{{ reversedMessage }}"</p>

</div>

<script>var vm = new Vue({

el: '#example', data: { message: 'Hello' },

computed: { // 计算属性的 getter reversedMessage: function () {

// `this` 指向 vm 实例 return this.message.split('').reverse().join('') } }})</script></body></html>

-watch示例:

<!DOCTYPE html>

<html><head><metacharset="utf-8"><title></title>

<scriptsrc="js/vue.min.js"></script></head>

<body>

<divid="demo">

<inputtype="text"v-model="firstName"></input><inputtype="text"v-model="lastName"></input>{{ fullName }}

</div>

<script>var vm = new Vue({

el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val }

}})

</script></body></html>

computed，watch，methods执行顺序

computed是在HTML DOM加载后马上执行的，如赋值；

而methods则必须要有一定的触发条件才能执行，如点击事件；

watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

watch和computed各自处理的数据关系场景不同

1.computed擅长处理的场景：一个数据受多个数据影响（多个值的变化影响一个）

2.watch擅长处理的场景：一个数据影响多个数据(观察一个值的变化，另外的值跟着变化)

Vue目前学到的属性

el

data

methods

computed

watch