精华内容
下载资源
问答
我要提问
  • 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>
    更多相关内容

  • Vue中的computed(计算属性)和watch(监听属性)的区别

     2022-05-09 15:00:31
    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存在的重复计算情况
    收起
    展开全文
    javascript

  • vue的计算属性？计算属性与方法的区别?计算属性与watch有什么区别？

     2022-07-05 21:29:39
    vue的计算属性？计算属性与方法的区别?计算属性与watch有什么区别？
    收起
    javascript 开发语言

  • Vue - 方法，计算属性和Watch监听的区别

     2022-02-15 10:48:56
    Vue 中方法，计算属性和Watch监听的区别 方法 方法函数时没有缓存的； 每次调用时，都会重新执行该函数，可以有返回值也可以没有返回值； 计算属性 计算属性是有缓存的，只要相关依赖没有改变，多次访问计算属性...
    收起
    javascript

  • vue中computed计算属性和watch监听属性有什么区别?以及它们的运用场景?

     2022-05-24 17:57:11
    computed 计算属性：依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值。 watch 侦听器：更多的是观察的作用,无缓存性,类似与某些数据的...
    收起
    javascript

  • vue计算属性computed和监视器watch的使用

     2021-10-19 20:08:22
    计算属性 1) 在 computed 属性对象中定义计算属性的方法 2) 在页面中使用{{方法名}}来显示计算的结果 监视属性 1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性 2) 当属性变化时, 回调函数自动调用,...
    收起
    javascript

  • Vue计算属性和方法区别

     2022-05-13 16:17:28
    Vue的计算属性和方法的区别大家都很清除了，计算属性由缓存并且是基于它们的响应依赖关系缓存，只有依赖的响应式关系发生变化时才会重新执行函数(重新渲染模板时如果依赖关系没有变化则立即返回结果，不会重新执行...
    收起
    javascript

  • vue 计算属性和watch

     2021-06-07 16:11:47
    computed适合处理的场景是，一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性，computed是带缓存的，只有其引用的响应式属性（属性绑定）发生改变时才会重新计算(如果引用...
    收起

  • vue计算属性computed、事件、监听器watch的使用讲解

     2020-10-17 12:10:45
    今天小编就为大家分享一篇关于vue计算属性computed、事件、监听器watch的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    收起

  • vue计算属性 和监听 区别

     2021-09-17 15:43:27
    计算属性($Watch): 1.只需要一个就行 因为 计算属性依赖于数据源data 里面的属性的但是一次可以依赖多个 2. 因为新增属性 所以要写 return 监听: //监听的一种方式 vue 对象创建完成后直接写到实例属性上 //参数1:...
    收起
    javascript

  • vue里面的计算属性computed和watch的区别，以及的计算属性和watch在什么场景下使用

     2021-07-12 14:10:15
    1.计算属性和 watch 的区别 计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。 所以区别来源于用法，只是需要动态值，那就用计算属性；需要...
    收起

  • vue中计算属性和watch的区别

     万次阅读 2018-03-14 10:23:37
    学习vue框架，一定少不了学习计算属性computed和watch computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 ...
    收起

  • Vue的计算属性和侦听器Watch

     2021-11-20 21:12:26
    一、计算属性 1、什么是计算属性？ <div> {{message.split('').reverse().join('')}} </div> 模板设计的初衷是用于简单计算的，在模板内放太多的逻辑会让模板难以维护，对于任何复杂的逻辑都可以使用...
    收起
    开发语言

  • vue 计算属性和监听器区别

     2022-06-15 09:49:53
    vue计算属性和监听器的区别
    收起

  • Vue的计算属性computed和监听属性watch

     2022-07-06 13:15:05
    Vue
    收起
    javascript

  • vue中计算属性（computed）和监听器(watch)的区别

     2020-10-16 11:15:44
    vue中计算属性（computed）和监听器(watch)的区别 总结： 1.计算属性可以防止监听属性的滥用，但一些异步请求，计算属性做不到，还得watch来完成。 2.计算属性有缓存
    收起

  • Vue 计算属性、Vue 计算属性的特点 Vue 计算属性的缓存、Vue watch监听、Vue 过滤器、

     2021-06-25 14:33:14
    计算属性 我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护。 比如以下代码 <div> {{text.split(',').reverse().join(',')}} </div> 表达式里面包含了3...
    收起

  • vue 计算属性computed 和 methods 和 侦听属性（watch）

     2022-05-28 21:05:59
    vue 计算属性computed 和 methods 和 侦听属性（watch）
    收起
    javascript

  • vue计算属性和监听属性

     2022-04-13 16:16:30
    computed 计算属性 在模板经常需要对数据进行各种逻辑转换，导致模板过重难以...为了解决在模板中放入太多的逻辑会让模板过重且难以维护，vue开发了 computed (计算属性)。计算属性是基于它们的响应式依赖进行缓存的.
    收起

  • vue计算属性computed和侦听属性watch的用法和区别

     2020-11-17 11:54:48
    计算属性computed是基于响应式进行缓存，所以在执行的时候效率高，且只执行一次，从缓存读取，除非data里面的数据有更改才重新调用。注意：计算属性里面必须要ruturn，否则无法拿到结果。计算属性本质是一个函数，...
    收起
    javascript

  • 简单了解Vue computed属性及watch区别

     2020-11-19 19:58:37
    自己的理解： 　1. computed用来监控自己定义的变量，该变量不在data里面声明，直接在...这里的这个总金额使用computed属性来进行计算是最好 的选择 与watch之间的区别： 　刚开始总是傻傻分不清到底在什么时候使
    收起

  • 详解vue中computed 和 watch的异同

     2020-08-30 02:53:31
    本篇文章主要介绍了vue中computed 和 watch的异同，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • 详解vue 计算属性与方法跟侦听器区别(面试考点)

     2020-08-27 16:11:13
    主要介绍了详解vue 计算属性与方法跟侦听器区别(面试考点),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    收起

  • 通过实例解析Vue computed属性及watch区别

     2020-10-15 03:36:50
    主要介绍了通过实例解析Vue computed属性及watch区别,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    收起

  • Vue：计算属性和方法的区别和watch监听器的使用

     2019-11-20 15:02:41
    html <div id="app"> <div>{{firstName + " " + lastName}}</div> </div>... var app = new Vue({ el:'#app', data:{ firstName:"Min", lastName:"Box" } }...
    收起
    demo

  • vue计算属性和监听器区别

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,257
精华内容 9,302
热门标签
关键字：

vue计算属性和watch区别