精华内容
下载资源
问答
我要提问
  • 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计算属性和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计算属性computed和监视器watch的使用

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

    计算属性

    1) 在 computed 属性对象中定义计算属性的方法
    2) 在页面中使用{{方法名}}来显示计算的结果

    监视属性

    1) 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
    2) 当属性变化时, 回调函数自动调用,在函数内部进行计算

    计算属性高级

    1) 通过 getter/setter 实现对属性数据的显示和监视
    2) 计算属性存在缓存, 多次读取只执行一次 getter 计

    <template>
    <div>
        姓：<input type="text" v-model="firstname"><br>
        名：<input type="text" v-model="lastname"><br>
        姓名1（单向）<input type="text" placeholder="firstname1" v-model="fullName1"><br>
        姓名2（单向）<input type="text" placeholder="firstname2" v-model="fullName2"><br>
        姓名2（双向）<input type="text" placeholder="firstname3" v-model="fullName3"><br>
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
        <p>{{fullName1}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                firstname:"",
                lastname:"",
            }
        },
        // getter：属性的get方法
        // setter：属性的set方法
        // 计算属性存在缓存，多次读取只需要执行一次getter计算 
        computed: {
            // 初始化显示，初始化相关的data发生改变时候执行
            fullName1(){//计算属性的一个方法，方法的返回值作为属性值
                return this.firstname + '' + this.lastname
            },
            fullName3 :{
                get(){
                    //什么时候调用回调函数?
                    // 答案：初始化显示，初始化相关的data发生改变时候执行
                    //用来干嘛的?
                    // 答案：计算并返回当前属性的值 
                    return this.firstname + '' + this.lastname
                },
                //回调函数，监视当前属性值的变化当属性值发生改变时执行，更新相关的属性数据（输入框输入东西时候）
                set(value){//value就是fullName3的最新属性值
                console.log(value)
                    const names = value.split(' ')
                    this.firstname = names[0]
                    this.lastname = names[names.length-1]

                }
            }
        },
        watch: {
            //监听firstname
            firstname:function(newval,oldval){//说明firstname发生了变化，触发回调函数的内容
            console.log(this)//就是vue实例对象
                this.fullName2 = newval + '' +this.lastname
            },
            // //监听lastname
            // lastname:function(newval,oldval){//说明firstname发生了变化，触发回调函数的内容
            //     this.fullName2 = this.firstname + '' + newval
            // }
        },
        methods:{

        }
    }
</script>
    收起
    展开全文
    javascript

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

     2022-05-09 15:00:31
    computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，...
    收起
    经验分享 前端框架

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Vue的computed计算属性和watch的异同

     2020-09-04 09:26:27
    computed和watch的异同 不同点： 触发条件不同 computed计算属性会依赖于它的data属性，只要是依赖的data属性有变动的话，则自定义重新调用计算属性执行一次 watch则是在监控data属性值发生变化的时候，其余会自动...
    收起

  • vue计算属性和监听属性

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

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

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

  • 【经典面试题】Vue中computed和watch的区别

     2022-05-18 19:28:49
    vue 的 computed 和 watch 要在哪些场景下使用，其实也就是在问他们的区别。 一、computer 当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。 代码演示 <p id="app"> {{fullName}} <...
    收起
    javascript 前端框架

  • vue的computed(计算属性)与watch(监听器)的区别

     2020-10-22 18:53:26
    vue中computed和watch的区别 computed 作为计算属性 ，computed声明的计算属性不需要以()的方式进行获取； computed中的函数必须用return返回； 计算属性具有缓存性，只在相关依赖的值发生变化时，才会重新求值，...
    收起
    javascript

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

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

  • Vue计算属性和方法区别

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

  • Vue中computed和watch的区别（面试题）

     千次阅读 2021-09-01 11:27:43
    computed：通过属性计算而得来的属性 　1、computed内部的函数在调用时不加()。 　2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有...
    收起
    javascript

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

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

  • Vue中computed 和 watch 的区别和运用的场景？

     2021-10-11 10:08:50
    computed：计算属性，依赖于其他属性，并且computed的值有缓存。只有它依赖的属性值（响应式依赖）发生变化，下一次获取computed的值时才会重新计算computed的值。 运用场景： 当我们要进行数值计算，并且依赖于...
    收起

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

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

  • 详解vue中computed 和 watch的异同

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

  • vue的计算属性和watch属性和事件阻断

     2019-10-26 15:34:26
    1、防止事件冒泡 <button @click.stop="print('button')">点我试试啊</button> 2、防止页面跳转 <a href="http://www.baidu.com" @click.prevent ="print('我...3、计算属性和watch属性 cons...
    收起

  • 5.Vue中的计算属性（compute）监视属性（watch），二者优点和对比

     多人点赞 热门讨论 2022-07-30 14:25:06
    1.所被Vue管理的函数,最好写成普通函数,这样this指向的才是vm和组件实例对象。(1)Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以。(1)Vue中的watch默认不监测对象内部的值的改变(一层)(2)配置deeptrue...
    收起
    java 开发语言

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

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

  • vue计算属性 和监听 区别

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

空空如也

空空如也

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

vue计算属性和watch