vue2学习笔记1

1.优点

组价化模式，提高复用率，提高开发效率
声明式编码，不需要直接操作dom,提高开发效率
使用虚拟dom+diff算法，尽量复用dom节点

二，vue挂着节点渲染页面

new vue({
el:“#root”
})
const vm =new vue({
})

挂载

vm.$mount(“#root”)
三，data的写法，在组建中必须写成函数式，否则会报错
对象式写法
data:{}
2.函数式写法
data：function(){
return(){
}
}
简写
data (){
return(){

         }

}

四：MVVM模型

M(model数据模型)：data里面的数据
V（view视图）：模板代码
Vm（viewModel）:vue实例对象

五，数据代理（计算属性，数据代理，数据绑定）

Object.defineproperty(要添加属性的对象，
添加的属性名，
{
value：要添加的属性值，
enumerable:true,//控制属性是否可以枚举(循环，删除，修改)，默认值为false
writable:True,//控制属性可以被修改。默认值false
configurable:true,//控制属性可以被删除，默认值false
//当有人去读取一个对象里的person属性时，那么get（getter）函数就会被调用，而且返回的这个值就是person的值
get(){
console.log（有人读取数据了）
return"哈哈哈"
}，
//当有人修改person属性值时，set(setter)函数会被调用，且会收到修改后的具体值
set(value){
console .log（”被修改后的值”，value）
obj.person=value
}

}
要添加的属性值，)
Data里添加数据是响应式的有getter和setter,后面要自己手动添加数据，不是响应式的，因为object.defineproperty只能读和获取到改的数据，删除或者新增的数据捕获不到啊；

Vue3实现响应式，proxy代理
const prison ={name:“哈哈”,age:18}
const p = new Proxy(prison,{
//当prison中的某个属性被调用或者新增属性，就会调用get函数方法，并可以拿到prison对象，以及读取或新增的属性名
get(prison,valueName){
return prison[valueName]
},
//当数据被改变时，会调用set函数，并且会拿到prison对象，修改的属性名以及修改后的数据值
set(prison,valueName,value){
},
//当删除某个属性值时，会触发deleteproperty函数，会拿到prison对象以及删除的属性名
deleteProperty(prison,valueName){
return prison[valueName]
}
})

六，数据代理

七，计算属性computed

定义：需要已有的属性计算得出来的（data里面的属性计算得来）
原理：底层通过object.defineproperty方法的get和set两个函数
Get什么时候执行？
 初次读取时会执行一次
数据发生改变时，会再次执行调用
4.优点：与methods实现相比，有缓存机制（复用），效率更高，调试方便。
5.备注：计算属性最终会在vm实例上，直接调用跟data调用属性一致
涉及到修改属性值的时候，必须要通过set函数去响应修改，且set中要引起计算时依赖的数据发生变化


简写形式：（如果计算属性值只需要展示，不需要修改可以用简写形式，否则就要用上面完整形式的写法）

八，监听属性（watch）

当被监听的属性发生变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能监视！
监视的两种写法
new vue时传入watch配置
通过vm.$watch监视

深度监视

vue中的watch默认只监视一层数据
配置deep:true可深度监听对象变化及对象某个属性变化

九，computed和watch之间的区别

computed能完成的事，watch也能完成；
watch能完成的事，computed不一定能完成（例如：watch能进行异步操作）
十，react,vue中key有什么作用？（key内部原理）
虚拟dom中key的作用？
Key是虚拟dom对象的标识，当数据发生变化时，Vue会根据（新数据）生成（新的虚拟dom）,Vue进行（新虚拟Dom）与（旧虚拟Dom）的差异比较，比较规则如下：
2.对比规则
旧虚拟Dom中找到了新虚拟Dom相同的key:
若虚拟Dom中内容没改变，直接用旧的真实Dom
若虚拟Dom中内容改变了，则生成新的真实Dom,随后替换掉页面中之前的真是Dom
旧虚拟Dom中未找到与新虚拟Dom相同的key;创建新的真实的Dom,随后渲染到页面。
3.用index作为key可能会引发的问题
若对数据进行：逆序添加，逆序删除等破坏顺序的操作：会产生没有必要的真是Dom更新==》界面效果没问题，但效率低。
如果结构中还包含输入类的Dom:会产生错误Dom更新==》界面有问题
4.开发中如何选择key?
最好使用每条数据的唯一表示作为key,比如I’d,手机号，身份证，学号等唯一值。
如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示。使用index作为key是没有问题的。

十，监测数据改变的原理（观察者模式observer）

十一，vue.set()方法/this.$set（要加属性的对象名，属性名，值）；给对象添加新的属性/修改

局限：只能给data里面的某一个对象追加属性，不能直接给data添加一个属性；

十二，Vue监视数据的原理：

1.Vue会监视data中所有层次的数据
2.如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
对象中后追加的属性，Vue默认不做响应式处理
如需要给后面添加的属性做响应式，请使用如下aap:
vue.set(target,propertyName/index,value)或vm.$set(target,propertyName/index,value)3.如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：调用原生对应的方法对数组进行更新重新解析模板，进而更新页面。4.在Vue修改数组中的某个元素一定要用如下方法：使用这些api:push(),pop(),shift(),unshift(),splice(),sort(),reverse()vue.set()或vm.$set()
5，注意：set方法不能给data直接加属性，只能给里面的对象加属性

十三，过滤器（filters）

定义：要多显示的数据进行特定格式后在显示（适用于一些简单的逻辑处理）
语法：
注册过滤器：vue.filter(name，函数)或new Vue{filters:{}}
2.使用过滤器：{{××× | 过滤器名字}}或v-bind:属性=“XXX | 过滤器名”
备注：
过滤器也可以接受额外参数，多个过滤器也可以串联
并没有改变原来的数据，是产生新的对应数据

十四，跨站脚本攻击（xss）

V-html指令：
作用：想指定节点中渲染包含html结构的内容
与插值语法的区别：
v-html可以替换节点中所有的内容，{XXX}不会。
.v-html可以识别html结构
3.严重注意：V-html有安全性问题
在网站上动态渲染任意html是非常危险的，容易导致xss攻击（跨站脚本攻击）
一定要在可信的内容上使用v-html,永不要用在用户提交的内容上

十五，v-cloak

本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{xxx}的问题
搭配css解决页面初始化加载出现插值运算符的问题{xxx}

十六，v-pre指令

1.跳过其所在节点的编译过程
2.可利用他跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译（如果节点里有插值语法，那么使用v-pre不会解析显示{xxx}）
十七，自定义指令

十八，vue组件

每个一个vue.extend({})对象都是一个vueComponent构造函数
New vue中的this指vue实例对象
组件里的this指vueComponent实例对象

十九

，main.js入口文件中，实力对象里面的rander函数
Main.js引入的vue是简约版的vue,只有vue的核心js没有模板解析器，所以必须通过render函数接收到createElement函数去指定具体内容；
Vue的完整版is,包括vue核心和模板解析器

通过vue inspect > output.js 查看webpack配置，vue默认吧重要的文件隐藏掉了，里面不能随便修改内容，修改了vue不认。若自己要改配置可以新建vue.config.js文件，复制以下代码

这里面的东西可以修改，运行的时候，vue会把自己写的vue.config.js和webpack里有的配置进行合并

二十：组件子组件接收父组件参数

二十一，混合minxin

二十二，插件

二十四，组件传值子组件传父（自定义时间$emit(方法名，要传的值)）

解绑自定义事件（$off(要解绑的事件名)）

自定义事件总结

二十五，全局事件总线：任意组件间通信eventBus ，安装全局事件总线在main.js里面添加