Vue.js学习系列（二十八）-- 计算属性（二）

2019独角兽企业重金招聘Python工程师标准>>>

2. computed 与 methods区别

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>原始字符串: {{ message }}</p>

<p>计算后反转字符串: {{ reversedMessage }}</p>

<p>使用方法后反转字符串: {{ reversedMessage2() }}</p>

</div>

var vm = new Vue({

el: '#app',

data: {

message: '51code!'

computed: {

// 计算属性的 getter

reversedMessage: function () {

// `this` 指向 vm 实例

return this.message.split('').reverse().join('')

}

methods: {

reversedMessage2: function () {

return this.message.split('').reverse().join('')

}

})

</script>

</body>

</html>

运行结果如下：

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

转载于:https://my.oschina.net/u/2971691/blog/862572

Vue.js学习系列（二十八）-- 计算属性（二）相关推荐

Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
【二十八宿】又叫二十八舍或二十八星，是今人为观测日、
[二十八宿]又叫二十八舍或二十八星,是今人为观测日.月.五星运行而划分的二十八个星区,用来解释日.月.五星运行所到的地位.每宿蕴含若干颗恒星.二十八宿的称号,自西向东排列为:东方苍龙七宿(角.亢kan ...
Vue.js学习系列（二十七）-- 计算属性（一）
2019独角兽企业重金招聘Python工程师标准>>> 在模板中表达式非常便利,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护 ...
Vue.js学习系列（四十二）-- Vue.js组件
2019独角兽企业重金招聘Python工程师标准>>> 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.组件系统让我们可以用独立 ...
Vue.js学习系列（三十四）-- Vue.js样式绑定（五）
2019独角兽企业重金招聘Python工程师标准>>> 2. Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <!DOCTYPE h ...
Vue.js学习系列（八）---使用路由搭建单页应用(一)
2019独角兽企业重金招聘Python工程师标准>>> 之前已经通过命令 cnpm install vue-router --save 安装了vue-router.接下里我们在web ...
vue.js学习系列-第二篇
一 VUE实例生命周期钩子 1 生命周期函数定义生命周期函数就是vue在某一时间点自动执行的函数 2 具体函数 1 new vue() 2 be ...
vue.js实战第一篇 1-3章计算属性
一.基本环境的搭建 1.引用<script src=vue.min.js> 2.容器设置<div id="app"> 指令:v-for v-if v-htm ...
Vue.js学习系列（九）---使用路由搭建单页应用(二)
2019独角兽企业重金招聘Python工程师标准>>> 然后修改 main.js,引入并注册 vue-router import VueRouter from "vue-r ...

Vue.js学习系列（二十八）-- 计算属性（二）

Vue.js学习系列（二十八）-- 计算属性（二）相关推荐

最新文章

热门文章