Vue.js中计算属性和方法的区别
2017-09-12 09:49
926 查看
在vue.js中,计算属性和方法达到的效果是一样的,但是计算属性是基于依赖进行缓存的,只有message发生改变才会导致reverseMessage发生改变,只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数;而方法是每次调用都会执行。
计算属性:
方法:
需要注意的是,因为 Date.now() 不是响应式依赖,所以
不会更新。必须用methods:
计算属性:
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } }) </script>
方法:
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Method reversed message: "{{ reversedMessage() }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } }) </script>
需要注意的是,因为 Date.now() 不是响应式依赖,所以
computed: { now: function () { return Date.now() } }
不会更新。必须用methods:
methods: { now: function () { return Date.now() } }
相关文章推荐
- 详解vue 计算属性与方法跟侦听器区别(面试考点)
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- vue.js使用之计算属性与方法返回的差别
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js每天必学之计算属性computed与$watch
- vue.js 计算属性$watch
- vue.js计算属性
- Vue.js-----轻量高效的MVVM框架(五、计算属性)
- Vue.js计算属性
- js访问CSS的2种方法(点法和中括号法的区别),内含获取属性的兼容写法
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js计算属性computed与watch(5)
- js 对象方法、类方法、原型方法的区别;私有属性、公有属性、公有静态属性的区别
- Vue.js第三天学习笔记(计算属性computed)
- Vue.js教程之计算属性
- jQuery和js一些标签属性的获取和修改方法以及区别
- js 对象方法、类方法、原型方法的区别;私有属性、公有属性、公有静态属性的区别
- js 对象方法、类方法、原型方法的区别;私有属性、公有属性、公有静态属性
- js中属性和方法的类型和区别
- Vue.js学习 Item5 -- 计算属性computed与$watch