watch和props用法

一,watch用法

基础用法

  watch: {// 每当 question 改变时，这个函数就会执行question(newQuestion, oldQuestion) {if (newQuestion.includes('?')) {this.getAnswer()}}},

watch 选项也支持把键设置成用 . 分隔的路径：

export default {watch: {// 注意：只能是简单的路径，不支持表达式。'some.nested.key'(newValue) {// ...}}
}

深层侦听器#
watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。如果想侦听所有嵌套的变更，你需要深层侦听器：

export default {watch: {someObject: {handler(newValue, oldValue) {// 注意：在嵌套的变更中，// 只要没有替换对象本身，// 那么这里的 `newValue` 和 `oldValue` 相同},deep: true}}
}
谨慎使用深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。

即时回调的侦听器#
watch 默认是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。

我们可以用一个对象来声明侦听器，这个对象有 handler 方法和 immediate: true 选项，这样便能强制回调函数立即执行：

export default {// ...watch: {question: {handler(newQuestion) {// 在组件实例创建时会立即调用},// 强制立即执行回调immediate: true}}// ...
}

watch更多官网
官网watch

二,props用法

props使用字符串数组来声明

export default {props: ['foo'],created() {// props 会暴露到 `this` 上console.log(this.foo)}
}

ssprops使用对象来声明

export default {props: {title: String,likes: Number}
}

Prop 校验#
Vue 组件可以更细致地声明对传入的 props 的校验要求。比如我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。

要声明对 props 的校验，你可以向 props 选项提供一个带有 props 校验选项的对象，例如：

export default {props: {// 基础类型检查//（给出 `null` 和 `undefined` 值则会跳过任何类型检查）propA: Number,// 多种可能的类型propB: [String, Number],// 必传，且为 String 类型propC: {type: String,required: true},// Number 类型的默认值propD: {type: Number,default: 100},// 对象类型的默认值propE: {type: Object,// 对象或者数组应当用工厂函数返回。// 工厂函数会收到组件所接收的原始 props// 作为参数default(rawProps) {return { message: 'hello' }}},// 自定义类型校验函数propF: {validator(value) {// The value must match one of these stringsreturn ['success', 'warning', 'danger'].includes(value)}},// 函数类型的默认值propG: {type: Function,// 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数default() {return 'Default function'}}}
}

props更多官网
官网props