精华内容
下载资源
问答
  • vue计算属性和watch区别
    千次阅读
    2020-10-02 17:44:49

    计算属性computed和watch的区别

    通俗的来说既能实现computed又能够实现watch的推荐使用computed,重点在于computed的缓存功能。computed是用来声明式的描述一个值依赖其它的值,当所有依赖的值或者变量改变的时候,计算属性也会随着该变;watch主要是监听data里面的定义的量,当该变量变化的时候,触发watch

    两者的主要区别

    1. 计算属性的依赖值改变会重新执行函数,计算属性是取返回值来作为最新的结果,所以里面不能异步的返回结果(一定要多注意,吃的亏越多,越明白它的重要性),不能写异步逻辑
    2. watch函数的值改变watch重新执行,将一个值重新赋值作为最新结果,所以赋值的时候可以进行一些异步操作。

    验收一下

    <div id="app">
    	{{msg}}
    </div>
    <div>
    	{{newValue}}
    </div>
    <button @click="handleClick">点击</button>
     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
     <script>
    	let vm = new Vue({
    		el: "#app",
    		data:{
    		msg: "hello",
    		newValue:""
    		},
    		methods:{
    			handleClick(){
    				this.msg="hello1"
    			}
    		},
    		watch:{
    			msg(newValue){
    				setTimeout(()=>{
    					this.newValue=newValue
    				}, 1000);
    			}
    		}
    	})
    </script>
    

    使用计算属性则无法在里面写一些逻辑

    <div id="app">
    	{{msg}}
    </div>
    <div>
    	{{newValue}}
    </div>
    <button @click="handleClick">点击</button>
     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
    <script>
    	let vm = new Vue({
    		el:"#app",
    		data:{
    			msg:"hello",
    			temp:""
    		},
    		computed:{
    			newValue(){
    				if(this.temp){
    					// 不能写异步的代码
    					// setTimeout(()=>{
    					//		return msg
    					//	}, 1000)
    					return this.mag
    				},else{
    					return this.temp
    				}
    			}
    		},
    		methods:{
    			handleClick(){
    				this.msg="hello1",
    				this.temp="hello1"
    			}
    		}
    	})
    </script>
    
    更多相关内容
  • computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,...
    1. computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

    2. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed

    3. 如果computed属性属性值是函数 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

    在这里插入图片描述

    [](()侦听属性watch:

    1. 不支持缓存,数据变,直接会触发相应的操作;

    2. watch支持异步

    3. 监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值

    4. 当一个属性发生变化时,需要执行对应的操作;一对多

    5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,

    展开全文
  • vue计算属性和watch区别是什么?

    千次阅读 2020-07-02 00:40:11
    vue计算属性和watch区别 学习vue框架,一定少不了学习计算属性computed和watch computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值...

    vue中计算属性和watch的区别

    学习vue框架,一定少不了学习计算属性computed和watch

    computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。

    watch监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。

     

    <div>{{Name}}</div>
    data(){
    return {
    num:0,
    lastname:'',
    firstname:'',
    }
    }
    //当num的值发生变化时,就会调用num的方法,方法里面的形参对应的是num的新值和旧值
    watch:{
    num:function(val,oldval){
        console.log(val,oldval);
    }
    },
    //计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。
    computed:{
        Name:function(){
            return this.firstname+this.lastname;
        }
    }

     

    转载:vue计算属性和watch的区别是什么?

    展开全文
  • Vue计算属性watch

    2021-01-30 22:10:36
    如果它所依赖的这些属性值没有发生改变,那么计算属性的值是从缓存中来的,而不是重新编译,那么它的性能就会比较高,所以Vue中尽可能的使用computed来代替watch。 <!DOCTYPE html> <html> <hea

    一、Vue的计算属性是什么?

    它的计算属性是 computed

    二、计算属性computed的特点有哪些?

    • computed是计算属性、实时响应的。计算属性会依赖于它所使用的data中的属性,只要是依赖的属性值有改变,则自动重新调用一下计算属性;
    • 如果它所依赖的这些属性值没有发生改变,那么计算属性的值是从缓存中来的,而不是重新编译,那么它的性能就会比较高,所以Vue中尽可能的使用computed来代替watch。
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      </head>
      <body>
        <div id="app">
          <input type="text" v-model="firstName" />
          <input type="text" v-model="lastName" /> 
          {{fullName}}
        </div>
        <script>
          new Vue({
            el: '#app',
            data: {
              firstName: 'hello',
              lastName: 'vue'
            },
            computed: {
              fullName: function() {
                return this.firstName + this.lastName;
              }
            }
          });
        </script>
      </body>
    </html>
    
    • 注意:data中不用声明fullName
    • 监听computed路由变化,发现不可行。

    三、watch和computed的区别

    1.watch监听的是一个变量(或者是一个常量)的变化,这个变量可能是一个单一的变化也可能是一个数组。 computed可以监控很多个变量,但是这个变量一定是vue实例里面的

    四、watch监控自身属性变化

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      </head>
      <body>
        <div id="app">
          <input type="text" v-model="firstName" />
          <input type="text" v-model="lastName" /> 
          {{fullName}}
        </div>
        <script>
          new Vue({
            el: '#app',
            data: {
              firstName: 'hello',
              lastName: 'world',
              fullName: 'hello'
            },
            watch: {
              'firstName': function(newval, oldval) {
                // console.log(newval,oldval);
                this.fullName = this.firstName + this.lastName;
              },
              'lastName': function(newval, oldval) {
                // console.log(newval,oldval);
                this.fullName = this.firstName + this.lastName;
              }
            }
          });
        </script>
      </body>
    </html>
    

    五、watch监控路由对象

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
      </head>
      <body>
        <div id="app">
          <router-link to="/login">登录</router-link>
          <router-link to="/register/value">注册</router-link>
          <!--组件的显示占位域-->
          <router-view></router-view>
        </div>
        <script>
          //1.0 准备组件
          // var App = Vue.extend({});
          var login = Vue.extend({
            template: '<div><h3>登录</h3></div>'
          });
          var register = Vue.extend({
            template: '<div><h3>注册{{name}}</h3></div>',
            data: function() {
              return {
                name: ''
              }
            },
            created: function() {
              this.name = this.$route.params.name;
            }
          });
          //2.0 实例化路由规则对象
          var router = new VueRouter({
            routes: [{
                path: '/login',
                component: login
              },
              {
                path: '/register/:name',
                component: register
              },
              {
                path: '/',
                //当路径为/时,重定向到/login
                redirect: '/login'
              }
            ]
          });
          //3.0 开启路由对象
          new Vue({
            el: '#app',
            router: router, //开启路由对象
            watch: {
              '$route': function(newroute, oldroute) {
                console.log(newroute, oldroute);
                //可以在这个函数中获取到当前的路由规则字符串是什么
                //那么就可以针对一些特定的页面做一些特定的处理
              }
            }
          })
        </script>
      </body>
    </html>
    

    六、 vue watch和computed的使用场景

    • watch 监听某个数据的变化(监听完调用什么函数) 一个数据影响多个数据 (比如:浏览器自适应、监控路由对象、监控自身属性变化)
    • computed 计算后返回新 一个数据受多个数据影响(比如:计算总价格、过滤某些数据)
    • computed是用来处理你使用watch和methods的时候无法处理(比如有缓存的时候监听不了数据变化),或者是处理起来并不太恰当的情况的,利用computed处理methods存在的重复计算情况
    展开全文
  • vue计算属性计算属性与方法的区别?计算属性watch有什么区别
  • Vue 中方法,计算属性和Watch监听的区别 方法 方法函数时没有缓存的; 每次调用时,都会重新执行该函数,可以有返回值也可以没有返回值; 计算属性 计算属性是有缓存的,只要相关依赖没有改变,多次访问计算属性...
  • computed 计算属性:依赖其它属性值,并且computed的值有缓存,只有它依赖的属性值发生改变,下一次获取computed的值时才会重新计算computed的值。 watch 侦听器:更多的是观察的作用,无缓存性,类似与某些数据的...
  • 计算属性 1) 在 computed 属性对象中定义计算属性的方法 2) 在页面中使用{{方法名}}来显示计算的结果 监视属性 1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性 2) 当属性变化时, 回调函数自动调用,...
  • Vue计算属性和方法的区别大家都很清除了,计算属性由缓存并且是基于它们的响应依赖关系缓存,只有依赖的响应式关系发生变化时才会重新执行函数(重新渲染模板时如果依赖关系没有变化则立即返回结果,不会重新执行...
  • vue 计算属性和watch

    2021-06-07 16:11:47
    computed适合处理的场景是,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性,computed是带缓存的,只有其引用的响应式属性(属性绑定)发生改变时才会重新计算(如果引用...
  • 今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 计算属性($Watch): 1.只需要一个就行 因为 计算属性依赖于数据源data 里面的属性的但是一次可以依赖多个 2. 因为新增属性 所以要写 return 监听: //监听的一种方式 vue 对象创建完成后直接写到实例属性上 //参数1:...
  • 1.计算属性和 watch区别 计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。 所以区别来源于用法,只是需要动态值,那就用计算属性;需要...
  • vue计算属性和watch区别

    万次阅读 2018-03-14 10:23:37
    学习vue框架,一定少不了学习计算属性computed和watch computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 ...
  • 一、计算属性 1、什么是计算属性? <div> {{message.split('').reverse().join('')}} </div> 模板设计的初衷是用于简单计算的,在模板内放太多的逻辑会让模板难以维护,对于任何复杂的逻辑都可以使用...
  • vue计算属性和监听器的区别
  • Vue
  • vue计算属性(computed)监听器(watch)的区别 总结: 1.计算属性可以防止监听属性的滥用,但一些异步请求,计算属性做不到,还得watch来完成。 2.计算属性有缓存
  • 计算属性 我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长,就会变得臃肿难以维护。 比如以下代码 <div> {{text.split(',').reverse().join(',')}} </div> 表达式里面包含了3...
  • vue 计算属性computed methods 侦听属性(watch
  • computed 计算属性 在模板经常需要对数据进行各种逻辑转换,导致模板过重难以...为了解决在模板中放入太多的逻辑会让模板过重且难以维护,vue开发了 computed (计算属性)。计算属性是基于它们的响应式依赖进行缓存的.
  • 计算属性computed是基于响应式进行缓存,所以在执行的时候效率高,且只执行一次,从缓存读取,除非data里面的数据有更改才重新调用。注意:计算属性里面必须要ruturn,否则无法拿到结果。计算属性本质是一个函数,...
  • 自己的理解:  1. computed用来监控自己定义的变量,该变量不在data里面声明,直接在...这里的这个总金额使用computed属性来进行计算是最好 的选择 与watch之间的区别:  刚开始总是傻傻分不清到底在什么时候使
  • 本篇文章主要介绍了vue中computed watch的异同,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了通过实例解析Vue computed属性watch区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • html <div id="app"> <div>{{firstName + " " + lastName}}</div> </div>... var app = new Vue({ el:'#app', data:{ firstName:"Min", lastName:"Box" } }...
  • vue计算属性和监听器区别

    千次阅读 2020-09-08 14:32:15
    计算属性可以防止监听属性的滥用,但一些异步请求,计算属性做不到,还得watch来完成。 例如:解决element-ui分页中删除页面最后一条数据时,currentPage没有减一,页面列表为空问题时,就可以用到监听属性 监听...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,257
精华内容 9,302
关键字:

vue计算属性和watch区别