Vue计算属性和侦听器

最新推荐文章于 2024-07-04 15:06:45 发布

扼流挽

最新推荐文章于 2024-07-04 15:06:45 发布

阅读量241

点赞数 12

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Zbz00720/article/details/139882521

版权

文章目录

一、Vue计算属性
二、侦听器

一、Vue计算属性

基础语法：计算属性是通过computed属性定义，然后可以在模板中当做一个普通属性去使用；计算属性可以书写复杂的逻辑

<div id="app">
    {{publish}}
</div>

let app = Vue.createApp({
    computed:{
        publish(){
            return Math.random() > 0.5 ? 'yes' : 'no';
        }
    }
}).mount('#app')

计算属性的特点：计算属性会与使用的其他属性产生依赖关系，当其他属性发生改变时，计算属性会跟随一起变化

计算属性和方法的区别：计算属性会缓存计算结果，只要依赖属性不发生变化，不管你使用多少次计算属性，除了第一次执行计算以外，之后的结果都是直接从缓存中拿取。

方法则是，你用多少次，就重新计算多少次！

官方的建议：对于任何复杂逻辑，你都应当使用计算属性

<body>
    <div id="app">
        <p>{{say}}</p>
        <p>{{say}}</p>
        <p>{{say}}</p>
        <p>{{say1()}}</p>
        <p>{{say1()}}</p>
        <p>{{say1()}}</p>
    </div>
</body>
<script src="../vue.global.js"></script>
<script>
    let app = Vue.createApp({
        computed:{
            say(){
                console.log('computed');
                return 'hello'
            }
        },
        methods:{
            say1(){
                console.log('methods');
                return 'hello'
            }
        }
    }).mount('#app')
</script>

结果：在这里插入图片描述

二、侦听器

Vue提供了一种更通用的方法来观察和响应Vue实例上的数据变动: 侦听属性:watch;
当需要在数据变化时执行异步或开销较大的操作时, 这个方式是最有用的;比如注册时监听用户名是否已经存在;

watch的用法：把你想要观察的数据变量，写成同名的函数在watch里就可以了，数据变化时，就会触发方法里的逻辑。

data(){
   return {
        val:0,
    }
},
watch:{
  	 val(newValue,oldValue){
         if(newValue==50){
             alert('不要再拖动了！')
         }
     }
 }

扼流挽

关注

12
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue计算属性和侦听器

计算属性会缓存计算结果，只要依赖属性不发生变化，不管你使用多少次计算属性，除了第一次执行计算以外，之后的结果都是直接从缓存中拿取。watch的用法：把你想要观察的数据变量，写成同名的函数在watch里就可以了，数据变化时，就会触发方法里的逻辑。：计算属性是通过computed属性定义，然后可以在模板中当做一个普通属性去使用；Vue提供了一种更通用的方法来观察和响应Vue实例上的数据变动: 侦听属性:watch;：计算属性会与使用的其他属性产生依赖关系，当其他属性发生改变时，计算属性会跟随一起变化。
复制链接

扫一扫