登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript计算属性与监视(侦听)属性的使用

WBOY
发布: 2022-12-07 16:39:17
转载
1948人浏览过

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了计算属性与监视属性使用的相关内容,计算属性指的是通过一系列运算之后,最终得到的一个值,监视器允许开发者监视数据的变化,从而针对数据的变化做特定的操作;下面一起来看一下,希望对大家有帮助。

JavaScript计算属性与监视(侦听)属性的使用

【相关推荐:JavaScript视频教程web前端

计算属性(computed)

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

<div>
    R:<input><br>
    G:<input><br>
    B:<input>
    <div>
        {{rgb}}
    </div>
    <button>按钮</button>
</div>
<script></script><script>
    const vm = new Vue({
        el:&#39;#root&#39;,
        data:{
            r:0 , g:0, b:0,
        },
        methods: {
            show() {
                console.log(this.rgb);
            }
        },
        //所有计算属性都要定义到computed节点之下
        computed: {
            // 计算属性在定义的时候,要定义成“方法格式”,在这个方法中会生成好的rgb(x,x,x)的字符串
            //实现了代码的复用,只要计算属性中依赖的数据变化了,则计算属性会自动重新赋值
            rgb() {
                return `rgb(${this.r},${this.g},${this.b})`
            }
        }
    })
</script>
登录后复制

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

<div>
    <input><br>
    <input><br>
    全名:<span>{{fullname}}</span>
</div>
<script></script><script>
    const vm = new Vue({
        el:"#root",
        data:{
            firstname:&#39;张&#39;,
            lastname:&#39;三&#39;
        },
        computed:{
            fullname:{
                //当初次读取fullname或所依赖的数据发生变化时,get被调用
                get(){
                    console.log(&#39;get被调用了&#39;);
                    return this.firstname+&#39;-&#39;+this.lastname
                },
                //当主动修改fullname时,set被调用
                set(value){
                    console.log(&#39;set&#39;, value);
                    const arr = value.split(&#39;-&#39;);
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
        }
    })
</script>
登录后复制

计算属性

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

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

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

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

监视属性(watch)

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

监视的两种方法

通过new Vue时传入watch配置:

<div>
    <input>
</div>
<script></script><script>
    const vm = new Vue({
        el:&#39;#root&#39;,
        data:{
            name:&#39;&#39;
        },
        //所有的侦听器,都应该被定义到watch节点下
        watch:{
            // 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
            //newVal是“变化后的新值”,oldVal是“变化之前旧值”
            name(newVal,oldVal){ //监听name值的变化
                console.log("监听到了新值"+newVal, "监听到了旧值"+oldVal);
            }
        }
    })
</script>
登录后复制

通过vm.$watch监视:

<div>
    <h2>今天天气很{{info}}</h2>
    <button>切换天气</button>
</div>
<script></script><script>
    const vm = new Vue({
        el:&#39;#root&#39;,
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot ? &#39;炎热&#39; : &#39;凉爽&#39;
            }
        },
        methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
    })
    vm.$watch(&#39;info&#39;,{
        handler(newVal,oldVal){
            console.log(&#39;天气被修改了&#39;, newVal, oldVal);
        }
    })
</script>
登录后复制

immediate选项

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

<div>
    <input>
</div>
<script></script><script>
    const vm = new Vue({
        el:&#39;#root&#39;,
        data:{
            name:&#39;admin&#39;
        },
        watch:{
            //定义对象格式的侦听器
            name:{
                handler(newVal,oldVal){
                    console.log(newVal, oldVal);
                },
                immediate:true
            }
        }
    })
</script>
登录后复制

深度监视

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

<div>
    <input>
</div>
<script></script><script>
    const vm = new Vue({
        el:&#39;#root&#39;,
        data:{
            info:{
                name:&#39;admin&#39;
            }
        },
        watch:{
            info: {
                handler(newVal){
                    console.log(newVal);
                },
                //开启深度监听
                deep:true
            }
        }
    })
</script>
登录后复制

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

watch:{
    "info.name"(newVal){
        console.log(newVal);
    }
}
登录后复制

总结

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

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

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

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

watch能开启异步任务,案例如下:

<div>
    <input><br>
    <input><br>
    全名:<span>{{fullname}}</span>
</div>
<script></script><script>
    const vm = new Vue({
        el:"#root",
        data:{
            firstname:&#39;张&#39;,
            lastname:&#39;三&#39;,
            fullname:&#39;张-三&#39;
        },
        //watch能开启异步任务
        watch:{
            firstname(val){
                setTimeout(()=>{
                    this.fullname = val + &#39;-&#39; + this.lastname
                },1000)
            },
            lastname(val){
                this.fullname = this.firstname+&#39;-&#39;+val
            }
        }
    })
</script>
登录后复制

computed和watch之间的区别

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

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

隐性原则

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

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

【相关推荐:JavaScript视频教程web前端开发

以上就是JavaScript计算属性与监视(侦听)属性的使用的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:CSDN网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号