监听的属性发生改变就会执行回调函数
注意:Vue所管理的函数,都不能写成箭头函数,
Vue管理的函数:methods中定义的函数,计算属性,监听器中的函数
# 事件修饰符
vue中的事件修饰符:
1.prevent:阻止默认事件(常用);原生阻止默认行为:event事件对象.preventDefault()
2.stop:阻止事件冒泡(常用);原生阻止冒泡:event事件对象.stopPropagation()
3.once:事件只触发一次(常用)之后就不会触发绑定的事件函数;
4.capture:使用事件的捕获模式:意思是再事件捕获阶段就执行绑定的事件处理函数
默认事件触发有两个阶段:
一,事件捕获阶段,由外向内进行事件的捕获,此阶段不会执行事件处理函数,
二,事件冒泡阶段,由内向外进行事件冒泡,此阶段会指向绑定的事件处理函数,先触发内部绑定的事件
5.self:只有event.target是当前操作的元素时才触发事件;触发事件函数执行的元素是绑定事件的元素
6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
默认是:事件一被触发,先执行事件处理函数,等到事件处理函数执行完毕后,然后才会执行事件的默认行为
7.native 组件标签绑定的事件的修饰符,添加上这个修饰符才会把内置事件绑定给组件内部的根元素
# 计算属性详解
计算属性:在vue中放在data中的数据都是属性,计算属性是对data中的数据进行处理
计算属性的原始写法
computed:{
计算属性名:{
get(){
return 计算属性的值
},
set(value){
get中依赖的数据=value
}
}
}
计算属性中的get调用时机:
(1).页面中初次使用计算属性时会执行一次。
(2).当计算属性依赖的数据(return返回的数据就是依赖的数据)发生改变时会被再次调用。
计算属性中set调用时机
(1).当计算属性被修改时
使用计算属性获取值的方式是调用get函数,获取get函数的返回值
计算属性在第一次执行后,vue会将计算属性就缓存下来,之后使用到的同一个计算属性就不会再次去执行get获取,而是去找缓存
默认的计算属性中的值是不能被修改的
如果需要直接修改计算属性(如果不需要修改计算属性的值,那么就直接使用计算属性的简写)
那么就需要在计算属性中添加上set方法,set方法接收需要修改的值,然后将需要修改的值赋值给get函数中所依赖的数据
计算属性不能与data中的属性重名
如果计算属性不需要被修改,那么直接写计算属性的简写方式即可
简写方式:
computed:{
计算属性名(){
return 计算属性的值
}
}
# 监听器详解
监听器监听的属性是data中的数据,或者是计算属性,或者是props中的数据
监听器有两种写法:
1。Vue监听器:
watch:{ //完整写法:需要使用immediate,deep时,使用完整写法
"需要监听的数据":{
immediate:true/false(默认值) 是否初始化完毕watch后直接调用一次监听的属性所绑定的函数
deep:true//是否开启深度监视,
handler(新的值,旧的值){//handler回调函数名是固定写法
...
}
}
}
第一种方法简写:
watch:{
需要监听的数据(newValue,oldValue){
...
}
}
2.Vue实例对象的实例方法的监听器
完整写法
Vue实例.$watch("监听的属性",{
。。一些配置,
handler(newValue,oldValue){
}
})
简写
Vue实例.$watch("监听的属性",function(newValue,oldValue){
方法体
})
监听的属性发生改变就会执行回调函数
注意:Vue所管理的函数,都不能写成箭头函数,
Vue管理的函数:methods中定义的函数,计算属性,监听器中的函数、
# 深度监视
开启深度监视,开启后一旦一个对象中的某一个属性值发生变化,就会调用handler函数
写法:
watch: {
// 检测对象中的某个属性的改变
"number.a": {
deep: true
handler() {
console.log("a的值发生变化");
}
},
// 监听对象中所有的属性值变化,需要开启deep=true深度监视
"number": {
deep: true,//开启深度监视,开启后一旦一个对象中的某一个属性值发生变化,就会调用handler函数
handler() {
console.log("number里面的属性值发生变化");
}
}
}
# :key的作用与原理
面试题:react、vue中的key有什么作用?(key的内部原理)
key会绑定在虚拟DOM上
1. 虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:
2.Diff算法对比规则:
diff算法大致做法是比较old VDOM树和new VDOM树之间的差异,根据差异更新虚拟DOM树。
(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!
②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM,随后渲染到到页面。
3. 用index作为key可能会引发的问题:
1. 若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2. 如果结构中还包含输入类的DOM:
会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示,
使用index作为key是没有问题的。
5. key的作用:
1.主要用在 Vue 的虚拟 DOM 算法,在新旧 DOM 对比时辨识 新的VDOM,相当于唯一标识ID。
2.使 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染, 因此使用key值可以提高渲染效率,
同理,改变某一元素的key值会使该元素重新被渲染。
6.如果不设置key,vue会默认的将index设置为key
# Vue数据响应式
给vue添加响应式的数据:数据一添加,页面就会发生变化
响应式的给vue中的data中的 对象 添加属性
Vue.set(vm.字段,key,value)==》只有这样添加的才是响应式的数据
Vue实例对象.$set(vm.字段,key,value)==》只有这样添加的才是响应式的数据
直接通过 Vue实例对象.对象.属性="值"这种方式添加的数据是不具有响应式的
# Vue收集表单数据
v-model默认收集的是表单元素的value值
但是有一些输入类的元素没有明显的value值,如单选,多选框
收集表单数据:
若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。
若:<input type="checkbox"/>
1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
2.配置input的value属性:
(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model的初始值是数组,那么收集的的就是value组成的数组
备注:v-model的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
# Vue内置指令大全
v-bind: 单向绑定解析表达式, 可简写为 :xxx
v-model: 双向数据绑定
v-for: 遍历数组/对象/字符串
v-on: 绑定事件监听, 可简写为@
v-if: 条件渲染(动态控制节点是否存存在)
v-else: 条件渲染(动态控制节点是否存存在)
v-show: 条件渲染 (动态控制节点是否展示)
v-text指令:
1.作用:向其所在的节点中渲染文本内容。
2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。
v-html指令:
1.作用:向指定节点中渲染包含html结构的内容。
2.与插值语法的区别:
(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意:v-html有安全性问题!!!!
(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
v-cloak指令(没有值):
1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
v-once指令:
1.v-once所在节点在初次动态渲染后,就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
v-pre指令:
1.跳过其所在节点的编译过程。
2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译
3.元素加上v-pre指令后,不会参与vue的编译,直接会被放到页面上进行展示
# 混入
混入:https://www.cnblogs.com/dengyao-blogs/p/11589962.html
定义混入
在当前项目scr目录下,创建minix目录,然后传递混入的js文件,js文件中定义所有
混入的作用:
将多个组件中公共的部分,抽取出来,成为一个混入对象,从而简化代码,代码复用
混入对象的数据解构与组件基本一致
mixin混入对象的变量是不会共享的
注意:
如果组件中定义了data或者methods方法,组件中的data和methods就会覆盖掉混入中的data和methods方法
但是混入中的生命周期函数,组件对象是覆盖不掉的,所以如果组件和混入中都定义的生命周期函数,那么这个生命周期函数就会执行两遍
混入对象中可以写哪些内容?
只要组件.vue中的所有的属性和方法都可以写道混入对象中
局部混入:在组件中引入混入,只有引入了mixin的混入对象才可以使用,并且只有在引入了mixin混入对象的组件中才生效;
在需要的组件中引入mixin
import xxx from "./mixin/globalMixin"
然后注册和使用:
//这里注意:属性名为mixins,值为数组类型
mixins: [myMixin], //相当于注册,然后就可以直接使用混入对象中的数据
全局混入:全局混入我们只需要把mixin.js引入到main.js中,然后将mixin放入到Vue。mixin()方法中即可;
全局混入更为便捷,我们将不用在子组件声明,全局混入将会影响每一个组件的实例,
使用的时候需要小心谨慎;这样全局混入之后,我们可以直接在组件中通过this.变量/方法来调用mixin混入对象的变量/方法;
// 引入全局的混入 main.js
import { globalMixin } from "./mixin/globalMixin"
全局注册混入
Vue.mixin(globalMixin)
然后直接可以再所有的组件中使用到混入对象中的数据,通过this.的方式,所有的数据都直接混入到所有的组件中
mixin混入对象和Vuex的区别:
Vuex是状态共享管理,所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的;
mixin可以定义公用的变量或方法,但是mixin中的数据是不共享的,也就是每个组件中的mixin实例都是不一样的,都是单独存在的个体,不存在相互影响的;
mixin混入对象值为函数的同名函数选项将会进行递归合并为数组,两个函数都会执行,只不过先执行mixin中的同名函数;
mixin混入对象值为对象的同名对象将会进行替换,都优先执行组件内的同名对象,也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖;
## 插件
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:
添加全局方法或者 property。如:vue-custom-element
添加全局资源:指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router
使用插件步骤:
1.先创建插件文件
在src目录下创建xxx.js文件
然后再js文件中,暴露一个对象,对象必须要有install方法
plugin.js
const pluginObj = {
// 插件必须要有install方法,这个方法由Vue来进行调用
install(Vue,【参数列表】) {//install默认接收参数Vue构造函数
console.log("install", Vue);
在install方法内部可以既然用Vue进行一些全局的操作
定义全局过滤器
Vue.filter("过滤器名称",function(value){
})
定义全局混入
Vue.mixin({
....
})
给Vue原型上添加上一个方法或者属性
Vue.prototype.xxxx=function(){}
Vue.prototype.xxx="xxx"
定义全局指令
Vue.directive("指令名称",{
})
},
}
export default pluginObj
2.在main.js入口文件中使用插件
1.先引入插件
import xxx from "./插件路径"
2.使用插件
Vue.use(xxx,【参数列表】)
# 组件的自定义事件:
vue中的内置事件(click,keyup...)是给html元素使用的
组件的自定义事件是给组件使用的,会绑定到子组件VueComponent对象身上
组件实例对象.$on()=>绑定自定义事件
组件实例对象.$emit()=>触发自定义事件
组件实例对象.$off()=>解绑自定义事件
组件实例对象.$once()=>触发一次自定义事件
绑定事件:
方式1:
在父组件中,引入了子组件
<子组件 @自定义事件名称="父组件中的对应的事件处理函数"></子组件>
注意:这个自定义事件是绑定在子组件对象上
在子组件中,触发自定义事件,此时就可以向父组件传递数据
通过this.$emit("自定义事件名称",[参数列表]) ===>从而去父组件中触发自定义事件绑定的函数
方式2: 这种方式更加灵活
父组件中
<子组件 ref="xxx"></子组件> 通过ref来获取到子组件实例对象this.$refs.xxx=>获取的是子组件的实例对象
绑定事件:
子组件实例对象.$on("自定义事件名称",父组件的事件处理函数)
注意点:
如果事件处理函数是普通函数,那么谁触发自定义事件,那么父组件的事件处理函数中的this指向的就是谁
如果事件处理函数是箭头函数,那么事件处理函数中this就是父组件中的this
如果给组件标签直接绑定vue内置事件,那么vue会将内置事件,当成自定义事件
<组件 @click="事件处理函数"></组件> ==>组件会吧click当成自定义事件
<组件 @click.native="事件处理函数"></组件> ==>此时才会把click内置事件绑定给组件内部的根元素
解绑事件:
解绑组件上的一个自定义事件
组件实例对象.$off("自定义事件名称")
解绑组件上的多个自定义事件
组件实例对象.$off(["自定义事件名称1","自定义事件名称2",...])
解绑组件上的所有的自定义事件
组件实例对象.$off()
# 全局事件总线:可以实现任意组件间的通信
03-21
1622