4.vue2.x之vue2.x的选项 / 数据

vue2.x之vue2.x的选项 / 数据

data

类型： Function | Object
直接创建一个实例，data可以是一个对象：

var vm = new Vue({
  data: data
})

构造器或者说子组件中的data必须是一个函数，因为这类组件可能被多次复用，如果每次都共用一个对象里的数据会产生冲突混乱，而通过闭包，每次共享援引的对象为全新副本数据对象。

var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

访问data

const objV1=vm.$data.a
//vm代理了data里面的数据
//注意：$或者_开头的键名不会被vm代理，因为可能是vm原始的数据或者方法
const objV2=vm.a
console.log(objV1,objV2)

data的响应式原理：Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

props

类型：Array | Object
数组写法

Vue.component('props-demo-simple', {
//props接受的值的类型没有限制
  props: ['size', 'myMessage']
})

对象写法
选项：

type: 可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。
default: any
为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
required: Boolean
定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。
validator: Function
自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

示例：

Vue.component('props-demo-advanced', {
  props: {
    // 检测类型
    height: Number,
    // 检测类型 + 其他验证
    age: {
      type: Number,
      default: 0,
      required: true,
      //发布组件时很有用，验证失败控制台会抛出警告。
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

propsData

限制:只用于 new 创建的实例中。主要作用是传值测试。

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

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

computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

示例:

computed: {
	//箭头函数中的this并不只想vue实例，函数的第一个参数为vm实例。
  aDouble: vm => vm.a * 2
}

vuex结合computed的使用:

		computed:{
			//映射vuex中的state为计算属性，页面中触发了mutation视图也会更新.
			...mapState(['isShowTabBar'])
			}

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

注意:不应使用箭头函数定义methods函数,因为箭头函数中的this指向并不为vm实例.

watch

var vm = new Vue({
  data: {
    a: 1,
    b:2,
    e: {
      f: {
        g: 5
      }
    }
  },
    watch: {
    b:'someMethod',
	a:{
	    handler: function (val, oldVal) {
      	//do something
   		 },
    	//不论其被嵌套多深,都能被侦听到,同时触发回调函数a
    	 deep: true
    	 //侦听开始之后被立即触发回调函数a
    	 immediate: true
	},
	e: [
      'handle1',
      //f
      function handle2 (val, oldVal) { /* ... */ },
      {
      //g
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    //侦听e.f的变化
    'e.f': function (val, oldVal) { /* ... */ }
     },
    //侦听路由的变化
   $route(to,from){
    console.log(to.path);
  }

注意:不应该使用箭头函数来定义 watcher 函数,同methods函数会出现this指向的问题.