Vue学习
$set
1.vue不能检测以下变动的数组 (不能通过索引或者length改变数组)
通过索引值改变数组 data:{item:[1,2,3]} 不能通过 vue.item[0]=1
通过长度改变数组 data:{item:[1,2,3] } vue.item.length=1;
***不能通过索引值 length改变数组
可以通过 vue.set(对象，索引值，改变的值) vm.$set(对象，索引值，改变的值)
数组对象.splice()
2.vue不能检测对象属性的添加或者删除（对象属性的添加或者删除）
data:{ a:1} 不能检测对象属性的添加或者删除
3.已创建的实例 不能添加根级别的属性 （其data有计划）
data:{ itemdata:{a:111}} 可以vue.set(itemdata,b,222) 也可vm.$set()
不可以 重新给data设置别的属性
因其是已创建的实例
***为已有对象赋值多个属性
生命周期 一个实例从开始创建到销毁的过程
beforeCreate 实例初始化 无data无dom情况
created 实例创建完成 有data有fn dom没有渲染 （能初始化数据）
beforeMount 挂载开始前 有data有fn dom没有渲染 双向数据绑定的位置为{{}} （虚拟dom创建完成在最后一次渲染前 更改数据的机会）
mounted 挂载完成 页面数据渲染完成 真实dom挂载 （真实dom挂载）
beforeUpdate 更新之前 （重新渲染前触发）
updated 更新后 数据更改完成 dom也重新render完成
destory
$nextTick
在dom渲染完成后执行
created生命周期执行的dom操作 一定要放在$nextTick后才执行
数据变化后=》执行某个操作（该操作随着数据的改变而操作dom时）这个操作都应该进入到nextTick 回调函数中
$forceUpdate
强制刷新 解决页面不会重新渲染问题
v-on
v-bind
v-text
v-html
v-model 双向数据绑定 用于表单
v-for v-if v-show
v-if v-show区别 （是否初始条件就渲染）
v-if 惰性 如果初始条件为假 那它在条件为真的时候第一次渲染
v-show 不论初始条件为真假都渲染 只是进行css的切换 显示隐藏
v-model
在每次input事件后 输入框的值与数据同步
1.lazy （变input事件为change事件进行同步）
添加lazy改成change事件
<input v-model.lazy="message"> 变input事件为change事件进行同步
2.number （数字类型）
自动将用户输入的值转换为数字类型
<input v-model.number="message" type="number"> 返回值的类型为数字
3trim 自动过滤用户输入的首尾空格
<input v-model.trim="message">
事件修饰符 事件后才是修饰符
1.stop @click.stop stopPropagation 阻止冒泡 从里到外
2.prevent @click.prevent preventDefault 阻止默认行为
form @submit.prevent 阻止表单的默认提交行为
3.串联修饰符 @click.stop.prevent
4.entert||13(键值)等等 键修饰符 @keyup.enter|| @keyup.13=fn()
5once 点击回调只触发一次
6对象语法 v-on="{mousedown:dothis,mousemove:dothat}" ***对象语法
watch vue实例将会在实例化时遍历每一个watch属性
键：需要观察的表达式
值：对应的回调函数 || 函数名
watch：{
a:{
fn(){},
deep:true;//是否为深度监听
immediate:true//是否在绑定时就执行一次
}}
computed （计算属性基于依赖进行缓存）
计算属性 依赖的响应式属性更新才会被重新计算 会有缓存
计算属性默认只有getter
computed:{
fn1:{
get(){},
set(){}
}}
组件继承 extends
方法1.const component1={
data(){}
methods:{}
}
const components={
***extends:component1
propsdata:{} //传值给继承的组件
data(){} //会和继承组件的data合并
mounted会和继承组件的mounted方法合并 （通过this.$parent 调用继承组件的值）
}
方法2. const component2=Vue.extends(component1)
new component2=({
el:
data:{}
})
render函数
temeplate会调用render函数进行编译 使用createElement创建元素
const components={
//temeplate等价于这个render函数
render(createElement){
return createElement('div',{style：‘’}，)
}}
keep-alive 将不活动的组件实例保存在内存中
当组件在keep-alive中执行时 actived deactived 生命周期钩子函数会被执行
<keep-alive><loading></loading></keep-alive>
会缓存不活动的实例 需在特定情况下强制刷新某些组件
mixins
一个混入对象可以包含任意组件选项 同一生命周期 混入对象会比组件先执行
export const mixins1={
methods:{}
}
使用时 import mixins1 from '';
const components={
data(){}
mixins:[mixins1]}
