vue中的计算属性computed，watch（watch的immediate和handler以及deep）

vue中的计算属性computed实现数据实时更新到页面中去，而不会出现数据改变了但是在页面上还没有显示，computed是一个跟data平级的，他里面的属性不需要在data中定义，而是直接在computed里直接定义,引用跟data里的属性一样引用，computed里的属性本质是一个方法，但是引用他的时候当做一个属性来引用，而不是方法来引用，引用时一定不要加（），计算属性会被缓存起来，方便下次.

子义间

11443人浏览 · 2019-10-08 17:06:47

子义间 · 2019-10-08 17:06:47 发布

vue中的计算属性computed实现数据实时更新到页面中去，而不会出现数据改变了但是在页面上还没有显示，

computed是一个跟data平级的，他里面的属性不需要在data中定义，而是直接在computed里直接定义,引用跟data里的属性一样引用，computed里的属性本质是一个方法，但是引用他的时候当做一个属性来引用，而不是方法来引用，引用时一定不要加（），计算属性会被缓存起来，方便下次调用，当数据没有发生改变时，计算属性不会重新计算。

支持缓存，只有数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
5.如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id='itany'>
    <input type="text"v-model="firstname">
    <input type="text"v-model="lastname">
    <input type="text"v-model="name">
    <p>{{name}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            firstname:'',
            lastname:'',
        },
        computed:{
            'name':function () {
                return this.firstname+this.lastname;
            },
        },
    })
</script>
</body>
</html>

在watch跟computed差不多，watch跟data平级，watch中的属性也是一个方法，但是不需要return，也必须要在data先定义该属性，

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id='itany'>
    <input type="text"v-model="firstname">
    <input type="text"v-model="lastname">
    <input type="text"v-model="name">
    <p>{{name}}</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            firstname:'',
            lastname:'',
            name:''
        },
        watch:{
            'firstname':function () {
                this.name= this.firstname;
            },
            'lastname':function () {
                this.name= this.firstname+this.lastname;
            },
        },
    })
</script>
</body>
</html>

基本上不用watch来实现数据监听，因为太麻烦了，但是watch可以监听路由变化，

在vue实例中

		watch:{
            '$route.path':function (newVal,oldVal) {//newVal表示变化后的值，oldVal表示变化前的值
                console.log(newVal,oldVal)
            },
        },

区别：里面但是一个方法，computed的方法要return，watch里不需要

watch的高级用法

1.immediate和handler

使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，用immediate属性就可以解决这个问题。
比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时就需要将immediate设为true。其实handler方法就是跟一般使用watch一样，在数据发生变化的时候才执行handler,把immediate设为true，一开始就会执行handler

watch: {
    name: {
    　　handler(newValue, oldValue) {
      　　// ...
    　　},
    　　immediate: true
    }
  }

2.deep
但是普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，设置deep可以监听到name.newName的变化

watch: {
    'name.Name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^