vuejs api深入学习

tap的速度会快一点click会迟疑一下，用法完全一样了

method
对于任何复杂逻辑都应当使用计算属性。

<div id="example">
	<p>Original message: "{{message}}"</p>
	<p>Computed reversed message: "{{reversedMessage}}"</p>
</div>

var vm = new Vue({
	el:' #example',
	data:{
		message: 'Hello'
	},
	computed: {
		//计算属性的getter
		reversedMessage: function () {
			// 'this' 指向vm实例
			return this.message.split('').reverse().join('')
		}
	}
})

method
watch

这些都在api这里
data来说，
vue实例对象，vue将会递归将data的属性转化为getter/setter，data里只放数据

以_和$开头的属性代表的内置不会被Vue实例代理，因为他们可能和Vue内置的属性和，api

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

vm.$data.data 第一个指的是系统的内置的data 第二个是声明的data

放在data里的好处是默认直接调用，不需要写$data

props

props 可以是数组或对象，用于接收来自父组件的数据。
props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

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 验证的相关信息。

computed:

类型：{ [key: string]: Function | { get: Function, set: Function } }

详细：

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

注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

methods:

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

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

watch：

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性
简单的说，就是一个简单的监听作用

通俗来讲，

computed是在HTML DOM加载后马上执行的，如赋值数值运算

而methods则必须要有一定的触发条件才能执行，如点击事件；

watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

猜你喜欢