computed 计算属性
<!--
详情：
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
-->
<template>
<span> {{ number }}</span>
</template>
<script>
export default {
data(){
return {
number: 0
}
},
computed: {
message(){
return this.number + 1;
}
}
}
</script>
props
<!--
详情：
props 可以是数组或对象，用于接收来自父组件的数据。
props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
-->
<script>
export default {
props: ['size', 'myMessage']
}
</script>
<!-- 对象语法，提供效验 -->
<script>
export default {
props: {
// 基础的类型检查 (`null` 匹配任何类型)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
}
</script>
<!-- prop 类型检查： -->
# String
# Number
# Boolean
# Array
# Object
# Date
# Function
# Symbol
<!-- ============================== -->
<!-- 注意 特效继承 -->
<template>
<!-- my-input 是 自定义 一个组件 -->
<my-input type="date"></my-input>
</template>
<!-- my-input 组件 -->
<template>
<input type="text" />
</template>
<!-- !!! 传入的 type="date" 会替换掉 type="text" -->
<script>
export default {
inheritAttrs: false // 禁用特性继承
}
</script>
watch 监听
<!--
详情：
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。
-->
<script>
// 普通监听
export default {
data(){
return {
number: 0
}
},
watch: {
number(newVal, oldVal){
console.log('new =>', newVal,'old =>', oldVal);
},
// 方法名
number: 'watchNumber'
},
methods: {
watchNumber(newVal, oldVal){
console.log('watchNumber =>', newVal,'old =>', oldVal);
}
}
}
</script>
<script>
// 深度监听
export default {
data () {
return {
object: {
number: 0
}
}
},
watch: {
object: {
handler(val){
console.log('深度监听',val)
},deep: true
}
}
}
</script>
<!-- 注意： 深度监听无法监听 oldVal值 ！！！ -->
<!-- 监听对象中的属性值 （方案二） -->
<script>
export default {
data () {
return {
object: {
number
}
}
},
watch: {
'object.number': (newVal, oldVal) => {
console.log('new =>', newVal,'old =>', oldVal);
}
}
}
</script>
<!-- ! 注意 watch 函数的 this 指向 指向不是 vm实例本身！！ -->
