computed 和watch的区别

最新推荐文章于 2024-05-09 11:32:07 发布

小小怪将军！

最新推荐文章于 2024-05-09 11:32:07 发布

阅读量53

点赞数

分类专栏：前端+vue+js 文章标签：前端

本文链接：https://blog.csdn.net/qq_45753147/article/details/123847958

版权

前端+vue+js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

计算属性：computed
computed:计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。

## 每点击一次依赖的值就会发生改变，计算属性就会实时的发生改变，在页面展示

<template>
  <div class="ceshi">
     <h1>{{ reserve}}</h1>
     <button @click="add">点击</button>
  </div>
</template>

<script>
export default {
  data(){
     return {
        msg:'woshishui',
        aa:1
     }
  },
  methods: {
     add(){
         this.aa++
     }
  },
  computed:{
     reserve(){
         return this.msg.toUpperCase()+this.aa
     }
  }
}
</script>

1.变量不在 data中定义，而是定义在computed中，写法跟写方法一样，有返回值。函数名直接在页面模板中渲染，不加小括号。
2.根据传入的变量的变化进行结果的更新。
3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算一次，为了进行不必要的资源消耗，选择用计算属性

computed: 模糊查询依赖的值没有改变
<body>
    <div id="app">
        <input type="text" v-model="mytext">
        <ul>
            <li v-for="data in datalistcom" :key="data">
                {{ data }}
            </li>
        </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
            mytext:''
        },
        computed:{
                datalistcom(){
                    return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
                }
        }
    })
</script>

监听属性：Watch
上面说到计算属性的时候初始化的时候就可以被监听到并且计算但是watch是发生改变的时候才会触发。
当你有一些数据需要随着其它数据变动而变动时，或者当需要在数据变化时执行异步或开销较大的操作时，你可以使用 watch。
侦听属性是侦听的值改变会重新执行函数，将一个值重新赋值作为最新结果，所以赋值的时候可以进行一些异步操作。

<div id="app">
        <router-link to='/login' tag='span'>login</router-link>
        <router-link to='/register' tag='span'>register</router-link>
        <router-view></router-view><!-- 占位符、容器 -->
    </div>


<script>
    //组件模板对象
    var login = {
        template:'<h1>login component</h1>',
    }
    var register = {
        template:'<h1>register component</h1>'
    }

    //创建一个路由对象
    var routeObj = new VueRouter({
        routes:[    //路由匹配规则
            {path:'',redirect:'/login'},    //redirect 重定向，默认显示
            {path:'/login',component:login},
            {path:'/register',component:register}
        ],
    })

    new Vue({
        el:'#app',
        data:{},
        methods:{},
        router:routeObj, //将路由规则对象，注册到 Vue 实例，用来监听 URL 变化，然后展示对应的组件
        watch:{
            //  this.$route.path
            '$route.path':function(newVal,oldVal){
                if(newVal === '/login'){
                    console.log('Welcome login')
                }else if(newVal === '/register'){
                    console.log('Welcome register')
                }
            }
        }
    });

小小怪将军！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed 和watch的区别

计算属性：computedcomputed:计算属性是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果。不能写异步逻辑。## 每点击一次依赖的值就会发生改变，计算属性就会实时的发生改变，在页面展示<template> <div class="ceshi"> <h1>{{ reserve}}</h1> <button @click="add">点击</button&g.
复制链接

扫一扫