vue2知识点（一）（查缺补漏，打好基础）

女码农୧( ⁼̴̶̤̀ω⁼̴̶̤́ )૭

已于 2022-07-13 19:27:50 修改

阅读量329

点赞数 4

分类专栏：前端知识点集锦文章标签： vue.js 前端

于 2022-06-28 11:05:32 首次发布

本文链接：https://blog.csdn.net/m0_46615524/article/details/125498117

版权

前端知识点集锦专栏收录该内容

38 篇文章 2 订阅

订阅专栏

1. Vue.config.productionTip=false 阻止vue在在启动时生成生产提示

2. v-model只能用于表单元素上（如:input select）,v-model默认收集的是value值, v-model:value="name"的简写是 v-model="name"

3. el的第一种写法：el:"#root",第二种写法 vm.$mount("#root")意思是：将root模板挂载在vm实例上

4. data的两种写法,①对象式data:{} ②函数式data(){return{}｝，在用组件的时候必须用函数式

一个重要原则是：vue所管理的函数，不能采用箭头函数，一旦写了箭头函数，vue所指向的this就不是vue实例了，而是向上一层寻找this.

5. MVVM模型

（1）.M:(模型model)：对应data中的数据

（2）.V:(视图View):模板

（3）.VM(视图模型)：Vue实例对象

m-->vm-->v

data中的所有属性最后都出现在了vm身上；

vm身上的所有属性及 vue原型上的所有属性在vue 模板中都可以直接使用

6. Object.defineProperty的使用，例如：可以给person对象添加age属性和值，并且可以给其添加更多高级方法来控制age使用。

<script type="text/javascript">
    let number=18
    let person={
        name:"张三",
        sex:"男"，
    }
    
    Object.defineProperty(person,'age',{
        ennumerable:true;//控制属性是否可以枚举，默认是false
        writable:true;//控制属性是否可以被修改，默认值是false
        configurable:true;//控制属性是否可以呗删除
        get(){
            console.log('有人读取age属性了')
            return number;
        },
        set(value){
            console.log("有人修改了age属性且值是",value);
            number=value;
        }
    })
</script>

7. 数据代理：通过一个对象代理对另一个对象中的属性操作（读/写）

通过vm对象来代理data对象中属性的操作

好处：更加方便的操作data中的数据

基本原理：通过object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都添加一个getter和setter。在getter/setter内部去操作data对应的属性。控制台输入 vm._data.name和 vm.name都可访问

<script>
    let obj={x:100}
    let obj2={y:299}

    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x;
        },
        set(value){
            obj.x=value;
        }
    })
</script>

8. methods中配置的函数不要用箭头函数，否则this指向就不是vm了。

methods中配置的函数，都是被vue所管理的函数，this的指向是vm,或组件实例对象。

9. vue中的事件修饰符

(1).prevent :阻止默认事件（常用），如：@click.prevent="show()"

(2).stop:阻止事件冒泡

(3).once:事件只触发一次

(4).capture:使用事件的捕获模式

(5).self:只有event.target是当前操作的元素时才触发的事件

(6).passive:事件的默认行为立即执行，无需等待回调执行完毕。

10. 键盘事件(vue 中常用的按键别名)

回车－> enter

删除－>delete（捕获删除和退格键）

退出－>esc

空格－>space

换行－>tab(特殊，必须配合keydown去使用)

上－>up

下－>down

左－>left

右－>right

1.Vue未提供别名的按键，该按键可以使用原始的key值去绑定，但要注意转为kebab-case(短横线命名)的形式。

2.系统修饰键用法特殊：ctrl,alt,shift,meta(win键)

①配合keyup使用：按下修饰键的同时，再按下其他键。随后释放其他键，事件才能被触发。如：@keyup.ctrl="show()"或@keyup.ctrl.y="show()"等

②配合keydown使用：正常触发事件；如@keydown.ctrl="show()"

3.也可以使用keyCode去指定具体的按键（不推荐），如：@keyup.13="show()"

4.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名。（一般也不用自己去定义）

11. 监视属性watch

(1)当被监视的属性变化时，回调函数自动调用，进行相关操作

(2)监视的属性必须存在才能监视

(3)监视的两种写法

1.new Vue时传入watch配置

2.通过vm.$watch监视

代码如下：

watch:{
•           isHot:{
•                   immediate:true, //初始化时让handler调用一下
•                   //handler什么时候调用？当isHot发生改变时。
•                   handler(newValue,oldValue){
•                   console.log('isHot被修改了',newValue,oldValue)
•                   }
•               }
•           }
•       简写：
•           watch:{
•               isHot(newValue,oldValue){                       
•               console.log('isHot被修改了',newValue,oldValue)
•                   }
•               }
•           
•       vm.$watch('isHot',{
•           immediate:true, //初始化时让handler调用一下
•           //handler什么时候调用？当isHot发生改变时。
•           handler(newValue,oldValue){
•               console.log('isHot被修改了',newValue,oldValue)
•           }
•       })
•   简写：
•       vm.$watch('isHot',function(newValue,oldValue){
•               console.log('isHot被修改了',newValue,oldValue)
•           }
•       })

12.watch的深度监视

深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

①监视多级结构中某个属性的变化

   watch:{
•               "number.a"{
•               handler(){}
•           }
•       }

② 监视多级结构中所有属性的变化

        watch:{
•           numbers{
•               deep:true;//深度监视
•               handler(){}
•           }
•       }

13.computed和watch之间的区别

1.computed能完成的的功能，watch也能完成

2.watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作

watch:{
    fistName(val){
       setTiomout(()=>{
        this.fullName= this.val+this.lastName;
    },1000)//延时1秒后fullname的变化才显示
    }
}

两个重要的原则：

①被vue管理的函数，最好是写成普通函数。这样thiis的指向才是vm,或组件实例对象

②所有不被vue管理的函数（定时器函数，ajax的回调函数等，promise的回调函数），最好写成箭头函数。这样this的指向才是vm或组件实例对象。

14.v-if和v-show

①template可以配合v-if使用，不能配合v-show使用

②当需要频繁使用切换和显示时，采用v-show。

③v-if不展示时在dom元素上移除；v-show不展示时dom元素未移除，仅仅是使用样式被隐藏掉

④使用v-if时元素可能无法获取到，使用v-show元素一定可以获取到。

⑤v-if可以配合v-else-if和v-else使用，且结构不可以被打断

15.v-for

①用于展示列表数据

②语法：v-for="(item,index) in xxx" :key="index"

③可遍历数组，对象，字符串（用的少），指定次数（用的少）

16.react和vue中的key有什么作用？（key的内部原理）

1.虚拟DOM中key的作用:

key是虚拟dom对象的标识，当数据发生变化时，Vue会根据（新数据）生成（新的虚拟Dom），

随后Vue进行（新的虚拟Dom）与（旧的虚拟Dom）的差异比较，比较规则如下：

2.对比规则：

（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是没有问题的。

17.vue监视数据的原理

1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就要传入要检测的数据

(1).对象中后追加的属性，vue默认不做响应式处理。

(2).如需给后追加的属性做响应式，请使用如下API：

Vue.set(target,propertyName/index,value)或vm.$set(target,propertyName/index,value)

3.如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事

(1).调用原生对应的方法对数组进行更新

(2).重新解析模板，进而更新页面

4.在vue修改数组中的某个元素一定要用如下方法：

1.使用这些API：push(),pop(),shift(),unshift(),splice(),sort(),reverse(),

2.Vue.set()或vm,$set()

注意：Vue.set()和vm.$set()不能给vm或vm的根数据对象添加属性

18.收集表单数据

1.若：<input type="text" />,则v-model收集的是value值，用户输入的就是value值。

2.若: <input type="radio" />，则v-model收集的是value值，且要给标签配置value值。

3.若：<input type="checkbox" />，则：

（1）.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)

（2）.配置input的value属性：

①v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)

②v-model的初始值是数组，那么收集的就是勾选的value组成的数组

4.v-model的三个修饰符（v-model.xxx=...）：

①lazy:失去焦点再收集数据，减少了频繁收集数据，减少服务器压力

②number:控制输入的字符串转为有效的数字

③trim:输入的首尾空格过滤掉

19.过滤器

1.定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

2.语法：

①注册过滤器：Vue.filter(name,callback)或 new Vue(filters:{})

Vue.filter（"myslice",function(value){
    return value.slice(0,4);
}）

new Vue({
    fiters:{
        mySlice(){
            return value.slice(0,4);
                }
        }
})

②使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性=”xxx | 过滤器名“

3.注：

①过滤器也可以接收额外的参数，多个过滤器也可以串联

②并没有改变原本的数据，是过滤产生了另一个新的数据

20.v-html指令

1.作用：向指定节点中渲染html结构的内容

2.与插值语法的区别：

①v-html会替换掉节点的所有内容，{{xx}}插值语法不会

②v-html可以识别html结构

3.严重注意：html有安全性问题！

①在网站上动态的渲染任意html是非常危险的，容易导致xss攻击

②一定要在可信的内容上使用v-html,永不要用在用户提交的内容上。

21.v-cloak指令(没有值)

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

22.v-once指令

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

23.v-pre指令：

1.可以让vue跳过其所在节点的编译过程。

2.可利用它跳过：没有使用指令语法，没有使用插值语法的节点，可以加快编译的速度

24.自定义指令：

1.定义语法：

①局部指令：

new Vue({
    directives:{指令名：配置对象}
})
或：
new Vue({
    directives：{指令名：回调函数}
})

②全局指令：

Vue.directives(指令名，配置对象)
或：
Vue.directive(指令名，回调函数)

2.配置对象中常用的3个回调：

①bind:指令与元素成功绑定时调用

②inserted：指令所在元素插入页面时调用

③update:指令所在模板结构被重新解析时调用

3.注

①指令定义时不加v-,但使用时要加v-;

②指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

25.vue的生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

4.生命周期函数中的this指向是vm 或组件实例对象。

5.常用的生命周期钩子：

①mounted:发送ajax请求，启动定时器，绑定自定义事件，订阅消息【初始化操作】

②beforeDestroy:清除定时器，解绑自定义事件，取消订阅消息【收尾工作】

6.关于销毁实例：

①销毁后借助vue开发者工具看不到任何消息

②销毁后自定义事件会失效，但是原生Dom事件依然有效

③一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了

vue生命周期的原理图如下：