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

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

  • 以_或 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 }  }

• 详细 :

  • 计算属性将被混入到Vue实例中. 全部getter和setter的this上下文自动地绑定为Vue实例.
  • 注意若是你为一个计算属性使用了箭头函数,则this 不会指向这个组件的实例, 不过你仍然能够将其实例在uowei函数的第一个参数来访问.

  computed: { 
  aDouble : vm => vm.a * ２
  }  
  复制代码

  ＊计算属性的结果会被缓存，除非依赖的响应式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