vue中data/watch/computed/props

data/watch/computed/props

data

data为什么是一个函数不是对象

Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；
采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。
而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况
#watch/computed/prop

watch 监听

watch: {
    a(newValue, oldValue) {
        console.log(newValue, oldValue)
        this.b = newValue
    }
}
或者：
watch: {
    a: {
        handler(newValue, oldValue) {
            console.log(newValue, oldValue)
            this.b = newValue
            return newValue
        }，
        // 首次是否监听
        immediate: true
        // 对于对象，监听对象内部属性的变化
        deep: true
    }
}

• watch 监听的属性，如果修改了，会触发 watch 监听的回调函数，回调函数的参数是修改后的值和修改前的值
• 如果只想监听对象的某个具体属性，而不是整个对象，可以通过字符串路径的方式指定

watch: {  
  'someObject.nestedProperty'(newValue, oldValue) {  
    // 当 someObject.nestedProperty 发生变化时执行的操作  
  }  
}

• 无论是使用简写形式还是完整形式，都需要确保 watch 选项中的属性名与要观察的数据属性名一致
• 避免在回调中使用箭头函数：在 watch 的回调函数中，如果使用箭头函数，可能会导致 this 的指向错误。建议使用普通函数，以确保 this 正确指向 Vue 实例。

watch原理

监听对象，对象内部属性的变化，通过 Object.defineProperty 监听

computed 计算属性

computed: {
    a() {
        return this.b + 1
    }
}

computed 计算属性，在模板中直接使用，计算属性的值是缓存的，不会每次都重新计算，只有当依赖的数据发生变化时，才会重新计算
computed 计算属性，可以监听对象，对象内部属性的变化，会触发计算属性的重新计算;可以监听数组，数组的变化，也会触发计算属性的重新计算

• 计算属性一般监听data，监听路由/元素对象等，一般用watch
• 不能进行异步操作：计算属性的 getter 应只做计算而没有任何其他的副作用。不要改变其他状态、在 getter 中做异步请求或者更改 DOM
• 避免直接修改计算属性值
  • 计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建
  • 可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。

computed和watch的区别

• computed是计算属性；watch是监听，监听data中的数据变化。
• computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。
• computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。
• computed第一次加载时就监听；watch默认第一次加载时不监听。
• computed中的函数必须调用return；watch不是。
• 使用场景：
  computed：一个属性受到多个属性影响，如：购物车商品结算。
  watch：一个数据影响多条数据，如：搜索数据。数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。

props

通过路由或者父组件传过来的参数，可以通过props来接收。

<!-- 父组件 -->
<childrenComponent :name="name"/></childrenComponent>

// 子组件：
props: {
    name: {
        type: String,
        required: true
        default: 'default name'
        validator: function (value) {
            return value >= 18
            return new Error('name is not valid')
        }
    }
}
或者简单版本：
props: ['name'，'age']

获取props值，可以直接通过this.name、this.age获取，类似data