computed和watch的区别

最新推荐文章于 2024-06-12 15:02:52 发布

日月朝暮

最新推荐文章于 2024-06-12 15:02:52 发布

阅读量172

点赞数 2

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42447659/article/details/106076249

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

computed能监听v-moderl的值，只要值发生变化他就会重新去计算，并且必须要有返回值，用return来返回
computed当你需要双向的时候，这时候就需要用到get和set了，get的作用是返回当前的值，set监视当前的属性值的变化，当值发生变化时，更新数据。

  <template>
	  <div class="hello">
	    姓：<input type="text" v-model="firstName" placeholder="">
	    名：<input type="text" v-model="lastName" placeholder="">
	    姓名1（单项）<input type="text" v-model="fullName1" placeholder="">
	    姓名2（单项）<input type="text" v-model="fullName2" placeholder="">
	    姓名3（双向）<input type="text" v-model="fullName3" placeholder="">
	  </div>
	</template>
	
	<script>
	export default {
	  name: 'HelloWorld',
	  data () {
	    return {
	      firstName: ' ',
	      lastName: '',
	      fullName2: ''
	    }
	  },
	  computed: {
	    fullName1 () {
	      return this.firstName + ' ' + this.lastName
	    },
	    fullName3: {
	      get () {
	        return this.firstName + ' ' + this.lastName
	      },
	      set (value) {
	        const names = value.split(' ')
	        this.firstName = names[0]
	        this.lastName = names[1]
	      }
	    }
	  },
	  watch: {
	    firstName: function (value) {
	      this.fullName2 = value + ' ' + this.lastName
	    }
	  }
}

watch不仅能监听data里边的值，并且还能监听路由，watch的回调函数里边有2个参数，一个新的返回值newval和旧的返回值oldval

     var vm = new Vue({
        el: "#app",
		data:{
        },
        methods: {

        },
        router: router,
        watch: {
            "$route.path":function(newval,oldval){
            if(newval==="/login"){
                console.log("这是denglu页面")
            }else if(newval==="/zhuce"){
                console.log("这是注册页面")

            }
            }
        },

    })