Vue 中的计算属性,方法,监听器

2019-02-11 admin

计算属性

什么是计算属性呢,顾名思义就是计算后的属性,来看一段代码

<div id="app">
    {{firstName + ' ' + lastName}}      //这里展示出来的就是计算属性
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee'
    }
})

从这里可以发现,计算属性是有一些逻辑在里面的,但是我们不想在模版中写复杂的逻辑,模版中只做简单的展示,我们能不能再模版中只做一个简单的展示{{fullName}}

computed

<div id="app">
    {{fullName}}
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee'
    },
    //计算属性
    computed:{
        fullName(){
            return this.firstName + ' ' + this.lastName        
        }
   }
})

通过computed方法来写计算属性,fullName最后的值完全是通过firstNamelastName计算得来的。

计算属性有个非常重要的知识点,它是内置缓存的,怎么体现这点呢?

<div id="app">
    {{fullName}}
    {{age}}
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee',
        age:28
    },
    //计算属性
    computed:{
        fullName(){
            console.log('计算了一次')        //更新 age 时,这句话不执行,只有更新 fullName 依赖的值时,这句话才会被执行
            return this.firstName + ' ' + this.lastName        
        }
   }
})

当我更新age时,console.log('计算了一次')没有被执行,而当我更新fullName依赖的值firstName或者lastName时,这句话才会被执行。

除了使用计算属性来计算值以外,还可以用一个方法来实现methods

methods

<div id="app">
    {{fullName()}}      //这里调用方法需要加上括号
    {{age}}
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee',
        age:28
    },
    //方法
    methods: {
        fullName(){
            console.log('计算了一次')        //不管什么数据改变都会执行
            return this.firstName + ' ' + this.lastName
        }
    }
})

用这种方法写代码,其实是不如计算属性来的有效的,因为数据只要发生变化,console.log就会被执行,它内部没有缓存机制。

同样一个功能,用计算属性computed可以实现,用方法methods也可以实现,哪一种方式更好一些能,很显然是用计算属性更好些,因为它有缓存,性能更高

除了用计算属性、方法之外,还有没其他方法可以实现的,

watch

<div id="app">
    {{fullName}}
    {{age}}
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee',
        fullName: 'Dell Lee'
        age:28
    },
    //方法
    watch:{
        firstName(){
            console.log('firstName 改变了,计算一次')        //更新 age 时,这句话不执行,只有更新 fullName 依赖的值 firstName,这句话才会被执行
            this.fullName = this.firstName + ' ' + this.lastName
        },
        lastName(){
            console.log('lastName 改变了,计算一次')        //更新 age 时,这句话不执行,只有更新 fullName 依赖的值 lastName,这句话才会被执行
            this.fullName = this.firstName + ' ' + this.lastName
        }
    }
})

使用watch监听fullName的依赖值,当不是fullName依赖的内容改变时,console.log不会执行,只有当fullName依赖的内容发生改变时,console.log才会被执行。

虽然watch也能实现数据缓存,性能也不错,但相比computed来说,复杂了很多,所以如果一个功能既可以通过computed实现,methods实现,watch实现,优先推荐computed来实现,因为用这种方法写代码,既简洁,性能又不错。计算属性,方法,监听器

原文链接:https://segmentfault.com/a/1190000018120263

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53532.html

文章标题:Vue 中的计算属性,方法,监听器

相关文章
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
javascript教程:关于if简写语句优化的方法
UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法。尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作。也许有人认为if语句就那么简单,能优化...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
freemarker判断对象是否为空的方法
FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成XML,JSP或Java 等。 freemarker中显示某对象使用${name}. 但如果nam...
2017-03-27
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
jquery拼接ajax 的json和字符串拼接的方法
整理文档,搜刮出一个jquery拼接ajax 的json和字符串拼接的代码,稍微整理精简一下做下分享。 jQuery拼接字符串ajax &lt;form id=&quot;myForm&quot; action=&quot;#&quot;&...
2017-04-01
javascript中的switch语句
switch语句:该语句对表达求值结果和case的值进行比较。如果找到匹配,则程序执行的与该case关联的语句。break为可选参数,通常使用break阻止代码向下一个case执行。switch语句如下: switch (expressio...
2015-11-12
回到顶部