data
data中保存vm需要使用的数据,这些数据都是响应式的,即,一旦data内的数据发生改变,则页面中使用到data内数据的地方都会自动更新,具有两种写法:对象/函数 ,里面可以有多条数据
data:{
name:'moyu',
sex:'man'
}
data() {
return {
name:'moyu',
sex:'man'
}
}
响应式
当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。这意味着只有创建时已经存在于data中的数据才是响应式的
数据代理
vue会将data中所有数据的property,通过Object.defineProperty添加到实例的_data属性上,这可以让我们直接使用vm._data来访问属性
数据劫持
vue在数据代理基础上,为所有的data对象添加了getter和setter方法,这些对用户来说是不可见的,但是当数据发生改变时,setter方法就会被调用,这时就能让页面刷新,实现页面的响应式
注意⚠️:
- Object.defineProperty只能监视修改现有属性,当想为vue添加新属性或者删除属性,需要调用另外的方法
- 添加新属性
Vue.set( target, propertyName, value )
vm.$set( target, propertyName, value )
- 删除属性
Vue.delete( target, propertyName )
vm.$delete( target, propertyName )
- vue对数组的响应类式并不是通过为元素添加getter和setter实现的都,先调用原生方法对数组进行更新,然后再去更新dom
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题,以下两种方式都可以实现和vm.items[indexOfItem] = newValue相同的效果,同时也将在响应式系统内触发状态更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用 vm.$set 实例方法,该方法是全局方法Vue.set的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题,你可以使用splice:
vm.items.splice(newLength)
template
HTML5提供的新标签,更加规范和语义化 ;可以把列表项放入template标签中,然后进行批量渲染
注意⚠️:需要写一个div标签,不然不会显示全部内容
<template id="moyu">
<div>
<p><span>{{moyu}}</span></p>
<p><button>{{moyu}}</button></p>
<hr>
</div>
</template>
methdos
包含多个方法的对象,所有this的指向都会被绑定到vue实例上,所有方法都会被添加到vm实例上
注意⚠️:不能使用箭头函数
computed
计算属性就是根据已有的属性,进行计算后得出的新属性,使用同普通属性一样
注意⚠️:计算属性在依赖的属性发生改变的时候才会发生变化,不然不会发生变化,只会读取缓存,有两种写法
// 可读可写,get读,set写
computed:{
name:{
get(){
// 写计算后的结果,直接return
return 'moyu'
},
set(value){
// 写发请求,保存数据
}
}
}
// 只读
computed:{
pricesum(){
return 'moyu'.split("").reverse().join("");
}
}
watch
监听data或者计算属性发生变化的对象,具有三种属性
- handler:发生数据变化时的回调的函数,
- immediate:让监听在数据进行初次绑定时也执行
- deep:深度监听,监听对象时使用
三种写法:
// 监视info数据变化
watch:{
info(newValue,oldVlaue){
// 新旧数据都可以拿到进行操作
}
}
// 监视info对象变化
watch: {
info: {
handler(newValue,oldVal) {
// 新旧数据都可以拿到进行操作
},
deep: true // 深度监听
}
}
// info发生变化时,调用自定义方法
watch: {
// 可以是methdos中的方法
info: function(newValue,oldVal)){
// 新旧数据都可以拿到进行操作
}
}