vue选项/数据

data

props

类型: Object | Function
限制: 组件的定义只接收function
详细:
- Vue实例的数据对象.Vue将会递归将data的property转换为getter/swetter,从而让data的property能够响应数据变化.对象必须是纯粹的对象(含有零个或多个key/value对) 浏览器API创建的原生对象, 原型上的property会被忽略.大概来说,data应该只能是数据- 不推荐观察拥有状态行为的对象.
- 一旦观察过,你就无法在根数据对象上添加响应式property.因此推荐在创建实例之前,就声明所有的根级响应式property.
- 创建实例之后,可以通过 vm.$data 访问原始数据对象. Vue实例也代理了data对象上所有的property,因此访问vm.a等价于访问vm.$data.a
- 以_或 $开头的property 不会被 Vue实例代理,因为他们可能和Vue内置的peoperty API方法冲突.你可以使用例如`vm.$ data._property`的方式访问这些property.
- 当一个组件被定义,ata必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例.如果data仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象! 通过提供data 函数, 每次创建一个新实例后, 我们能够调用data函数,从而返回初始数据的一个全新副本数据对象.
- 如果需要,可以通过将vm.$data传入JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象.
示例


var data = {
            a: 1
        };
        //直接创建一个实例
        var vm = new Vue({
            data: data
        })
        vm.a // =>1
        vm.$data === data;//=>true
        //Vue.extend()中 data必须是函数
        var Component = Vue.extended({
            data() {
                return {
                    a: 1
                }
            },
        })

深入响应式原理cn.vuejs.org/v2/guide/re…

propsData

类型: Array<string> | Object
详细 : props 可以是数组或对象,用于接受来自父组件的数据.props可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测自定义验证和设置默认值 你可以给予对象的语法使用以下选项 :
- type : 可以是下列原生构造函数中的一种:String Number Boolean Array Object Date Function Symbol 任何自定义构造函数或上述内容组成的数组.会检查一个prop是否是给定的
  类型,否则抛出警告.
- defalut: any 为该prop指定一个默认值.如果改prop没有被传入,则换做用这个值.对象或数组的默认值必须从一个工厂函数返回
- required : Boolean 定义该prop是否是必填项.在非生产环境中,如果这个值为truthy且该prop没有被传入的,则一个控制台警告将会被抛出.
- validator : Function 自定义验证函数会将该prop值作为唯一参数带入.在非生产环境下,如果该函数返回一个falsy的值(验证失败),一个控制台警告将会被抛出.
- 示例

    //简单语法
    Vue.component(`props-demo-simple`,{
        props:['size','myMessage' ]
    })
    
    //对象语法,提供验证
    Vue.component('props-demo-advanced',{
        props:{
            //检测类型
            height: Number
            //检测类型+其他验证
            age:{
                type: Number,
                default : 0,
                required : true,
                validator : function (value){
                    return  value =>0
                }
            }
         }
    })

深入了解propcn.vuejs.org/v2/guide/co…

propsData

类型 : { [ key: string ] : any }
限制 : 只用于new 创建的实例中.
详细:
- 创建实例时传递props.主要作用是方便测试
示例:

var Comp  =Vue.extend({
    props:[ ' msg ' ],
    template: ' <div> {{ msg }} </div> ' 
})

var vm  = new Comp( { 
    propsData :｛
        msg : ' hello ' 
    ｝
})

computed

类型 : { [ key : string ] : Function ｜ { get : Function, set : Function }&emsp; }
详细 :
- 计算属性将被混入到Vue实例中. 所有getter和setter的this上下文自动地绑定为Vue实例.
- 注意如果你为一个计算属性使用了箭头函数,则this 不会指向这个组件的实例, 不过你仍然可以将其实例在uowei函数的第一个参数来访问.
```
computed: { 
aDouble : vm => vm.a&emsp;*&emsp;２
}  
```
＊计算属性的结果会被缓存，除非依赖的响应式property变化才会重新计算. 注意,如果某个依赖(比如响应式property)在该实例范畴之外,则计算属性不会被更新的
- 示例

 
var vm = new Vue({
            data: {
                a: 1
            },
            computed: {
                //仅读取
                aDouble: function() {
                    return this.a * 2
                },
                // 读取和设置
                aPlus: {
                    get: function() {
                        return this.a + 1
                    },
                    set: function() {
                        this.a = v - 1
                    }
                }
            },
        })
        vm.aPlus //2
        vm.aPlus //3
        vm.a //2
        vm.avm.aDouble //2

第一次写博客 md也不是很熟练就想试着写一下如有错误望指出谢谢0.0

初识Vue 尝试理解vue API的第一天

vue选项/数据

data

props

propsData

propsData

computed