vue构造函数（根实例化时和组件实例对象选项）参数：选项
详解
实例选项（即传给构造函数的options）：数据，DOM，⽣命周期钩⼦函数，资源，组合，其他
数据
data
属性能够响应数据变化，当这些数据改变时，视图会进⾏重渲染。
访问⽅式：
1、通过 vm.$data 访问。
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data// => true
vm.$el === ElementById('example') // => true
2、Vue 实例代理（以 _ 或 $ 开头的属性 不会 被 Vue 实例代理）了 data 对象上所有的属性。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加⼊到⼀个 Vue 实例中
var vm = new Vue({
data: data
})
/
/ 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a// => true
在组件中：
1、data 必须为返回⼀个初始数据对象的函数，因为组件可能被⽤来创建多个实例。如果 data 仍然是⼀个纯粹的对象，则所有的实例将共享引⽤同⼀个数据对象！通过函数的return，每次返回的是不同的对象。
2、每次创建⼀个新实例后，调⽤ data 函数会返回初始数据的⼀个全新副本数据对象。
拷贝原始数据对象：
将 vm.$data 传⼊ JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
注意：
1、data作为函数时如果使⽤了箭头函数，则 this 不会指向这个组件的实例，函数的第⼀个参数将是实
例。
data: vm => ({ a: vm.myProp })
2、只有当实例被创建时 data 中存在的属性才是响应式的。
3、使⽤Object.freeze()对data对象属性冻结，data不再是响应式。
使⽤建议：
1、推荐在创建实例之前，就声明所有的根级响应式属性。
2、后续才需要的某个属性，但是⼀开始它为空或不存，设置⼀些初始值，保证它是响应式的。
props
可以是数组或对象，⽤于接收来⾃⽗组件的数据，定义了当前组件有哪些可配置的属性。
当⼀个值传递给⼀个 prop 特性的时候，它就变成了那个组件实例的⼀个属性。
<script>
var obj = {
props:{
parentDataA:Number
},
mounted(){
console.log(this.parentDataA);
}
};
export default obj;
</script>
使⽤建议：
（1）写通⽤组件时，props最好⽤对象的写法，针对每个属性设置类型、默认值或⾃定义校验属性的值，是组件⽐较严谨。当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产⽣⼀个控制台的警告。
//类型检测String、Number、Boolean、Array、Object、Date、Function、Symbol
Vueponent('my-component', {
props: {
propA: Number,// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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
}
}
}
})
（2）在dom中，使⽤短横线分隔命名，在js中使⽤时是驼峰命名。
（3）是单向数据流，不应该在⼦组件中更改prop，会报错。可以在data中定义或者在computed中定义对应的属性。注意：对于⼀个数组或对象类型的 prop 来说，在⼦组件中改变这个对象或数组本⾝将会影响到⽗组件的状态。
（4）prop 会在⼀个组件实例创建之前进⾏验证，所以实例的属性 (如 data、computed 等) 在 default
实例化类和实例化对象
或 validator 函数中是不可⽤的。propsData
只⽤于 new 的实例中，⽤在全局扩展（extend）时进⾏传递数据。在实例化extend的构造器时，传⼊属性必须是propsData、⽽不是props哦。实例中props接收propsData，把props的数据作为测试数据。
不推荐⽤全局扩展的⽅式作⾃定义标签，完全可以使⽤组件来做，propsData在实际开发中我们使⽤的并不多。另外的例⼦，可以见全局API中的extend部分。
var Comp = d({
props: ['msg'],
template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
propsData: {
msg: 'hello'
}
})
computed
计算实例的属性，this 上下⽂⾃动地绑定为 Vue 实例。箭头函数this不会指向实例，需要显⽰传⼊vm。
computed: {
aDouble: vm => vm.a * 2
}
计算属性的结果会被缓存，除⾮依赖的响应式属性变化才会重新计算。
var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
计算属性默认只有 getter ，想改变实例属性，可以提供⼀个 setter。在getter中改变实例属性，eslint开启的情况下会报错。
使⽤建议：
1、在get中，不要改变实例属性，⽽是通过set来改变。
2、计算属性依赖响应式属性，注意它的使⽤场合和methods以及watch区分。
methods
可通过实例访问这些⽅法或在指令表达式或在模板插值中使⽤。⽅法中的 this ⾃动绑定为 Vue 实例。
注意，不应该使⽤箭头函数来定义 method 函数，this 不会指向 Vue 实例。
常⽤姿势：
methods: {
greet: function (event) {
// `this` 在⽅法⾥指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原⽣ DOM 事件
if (event) {
alert(event.target.tagName)
}
},
say(str,event){
//...
}，
console(){
//...
}
}
//直接调⽤或者传参调⽤，都有event传⼊
<button v-on:click="greet">Greet</button>
<button v-on:click="greet($event)">Greet</button>
//多个参数时，event事件要显⽰传⼊
<button v-on:click="say('what',$event)">Say what</button>
//由实例代理，直接被调⽤
事件修饰符
使⽤修饰符时，顺序很重要；相应的代码会以同样的顺序产⽣。
因此，⽤ v-on:click.prevent.self 会阻⽌所有的点击，⽽ v-on:click.self.prevent 只会阻⽌对元素⾃⾝的点击。
<!-- 阻⽌单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页⾯ -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件时使⽤事件捕获模式 -->
<!-- 即元素⾃⾝触发的事件先在此处理，然后才交由内部元素进⾏处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素⾃⾝时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!--2.1.4 新增点击事件将只会触发⼀次，还能被⽤到⾃定义的组件事件上-->
<a ="doThis"></a>
<!-- 滚动事件的默认⾏为 (即滚动⾏为) 将会⽴即触发 -->
<!-- ⽽不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<!--这个 .passive 修饰符尤其能够提升移动端的性能 -->
<!--不要把 .passive 和 .prevent ⼀起使⽤-->
<div v-on:scroll.passive="onScroll">...</div>
使⽤建议：
⼀般使⽤在事件上⾯，⼤部分时候可以使⽤computed代替methods和watch。
watch
key为要观察的表达式，值为对应的回调函数，当表达式的值改变，就触发回调。
回调函数可以是⽅法名（字符串形式），⽅法，或者包含配置选项的对象。
注意：Vue 实例将会在实例化时调⽤ $watch()，遍历 watch 对象的每⼀个属性，此时要是设置了immediate为true，其handle会⽴即被调⽤。
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
b: 'someMethod', // ⽅法名
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true// 深度 watcher，当监听的是⼀个对象的时候，指定deep: true可监听对象内部值的变化
},
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true// 该回调将会在侦听开始之后⽴即以表达式的当前值触发回调
},
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
/
/ f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
更复杂的表达式可以使⽤处理，⽤⼀个函数取代，回调函数参数为新值和旧值。
（在变异 (不是替换) 对象或数组时，旧值与新值相同，指向同⼀个引⽤）
// 函数
vm.$watch(
function () {
// 表达式 `this.a + this.b` 每次得出⼀个不同的结果时
// 处理函数都会被调⽤。
// 这就像监听⼀个未被定义的计算属性
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
}
)
vm.$watch 返回⼀个取消观察函数，⽤来停⽌触发回调：
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()
computed，methods，watch的使⽤场景
1、⼤部分时候都使⽤computed

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。