资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

JavaScript计算属性与监视属性怎么使用

本篇内容主要讲解“JavaScript计算属性与监视属性怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript计算属性与监视属性怎么使用”吧!

10年积累的成都网站设计、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有左权免费网站建设让你可以放心的选择与我们合作。

计算属性(computed)

计算属性指的是通过一系列运算之后，最终得到一个值。这个动态计算出来的属性值可以被模板结构或methods方法使用，案例如下：


    R：

    G：

    B：
    
        {{rgb}}
    
    按钮

JavaScript计算属性与监视属性怎么使用

使用名字动态改变实现计算属性案例：


    

    

    全名：{{fullname}}

JavaScript计算属性与监视属性怎么使用

计算属性：

1.定义：要用的属性不存在，要通过已有的属性得来

2.原理：底层借助了Object.defineproperty方法提供的getter和setter

3.优势：与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便

4.备注：计算属性最终会出现在vm上，直接读取使用即可；如果计算属性要被修改，那必须写set函数去响应改变，且set中要引起计算时依赖的数据发生改变。

监视属性(watch)

watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

监视的两种方法

通过new Vue时传入watch配置：


    

JavaScript计算属性与监视属性怎么使用

通过vm.$watch监视：


    
今天天气很{{info}}

    切换天气

JavaScript计算属性与监视属性怎么使用

immediate选项

默认情况下，组件在初次加载完毕后不会调用watch侦听器，如果想让watch侦听器立即被调用，则需要使用immediate选项，immediate的作用是控制侦听器是否自动触发一次，选项的默认值为：false


    

JavaScript计算属性与监视属性怎么使用

深度监视

如果watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项，开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”。


    

JavaScript计算属性与监视属性怎么使用

如果想要侦听的对象是子属性的变化，则必须包裹一层单引号。

watch:{
    "info.name"(newVal){
        console.log(newVal);
    }
}

JavaScript计算属性与监视属性怎么使用

总结：

1）Vue中的watch默认不监测对象内部值的改变(一层)

2）配置deep:true可以监测对象内部值改变(多层)

3）Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

4）使用watch时根据数据的具体结构，决定是否采用深度监视

watch能开启异步任务，案例如下：


    

    

    全名：{{fullname}}

JavaScript计算属性与监视属性怎么使用

computed和watch之间的区别：

1.computed能完成的功能，watch都可以完成。

2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

隐性原则：

1.被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

2.不被Vue所管理的函数(定时器的回调函数、ajax的回调函数、Promise的回调函数)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。

到此，相信大家对“JavaScript计算属性与监视属性怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


新闻名称：JavaScript计算属性与监视属性怎么使用
路径分享：http://cdkjz.cn/article/gcscsc.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
网络营销推广户外广告设计路面机械及配件重庆水土双线托管成都雨棚定制电子商务商城网站广东网站设计成都光华电信机房盐亭网站制作公司成都制作网站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图