vue-api-数据

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实例本身！！ -->