Vue核心

最新推荐文章于 2021-12-11 19:09:51 发布

SikW_04_27

最新推荐文章于 2021-12-11 19:09:51 发布

阅读量145

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_50429510/article/details/119729129

版权

Vue核心

特点

采用组件化模式，提高代码复用率，让代码有更高的维护性
声明式编码，让编码人员无需直接操作DOM，提高开发效率

初识Vue

想让Vue工作，就必须先创建一个Vue实例，而且需要传入一些配置对象
root容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为[Vue模板]
Vue实例和容器是一一对应的
真实开发中只要有一个Vue实例，并且会配合着组件一起使用
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生改变，那么页面中用到数据的地方也会自动更新

注意区分： js表达式和 js代码(语句)

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方

a
a+b
demo(1)
x === y ? 'a' : 'b'

js代码

if(){}
for(){}

模板语法

类型

插值语法

功能：用于解析标签体内容

写法：{{xxx}}，xxx是js表达式，且直接可以读取到data中的所有属性
指令语法

功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）

举例：v-bind:herf='xxx' 或简写为 :href='xxx'，xxx同样要写js表达式，且可以读取到data中的所有属性

备注：Vue里面有很多指令，且形式都是v-xxx，data里面还可以多层嵌套属性

数据绑定

绑定方式

单向绑定（v-bind）：数据只能从data流向页面
双向绑定（v-model）：数据不仅能从data流向页面，也能从页面流向data
备注：
- 双向绑定一般都应用在表单类元素上（如：input、select等）
- v-model:value可以简写为v-model，因为v-model默认收集的就是value值

`el`与`data`的两种写法

el的两种写法
1. new Vue的时候配置el
2. 先创建Vue实例，然后再通过vm.$mount('#root')来指定el的值
data的两种写法
1. 对象式
2. 函数式
如何选择：学习到组件的时候，必须使用函数式，否则会报错
一个重要的原则

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不会是Vue实例了

MVVM模型

M：模型（Model）：对应data中的数据
V：视图（View）：模板
VM：视图模型（ViewModel）：Vue实例对象

备注：

data中的所有属性，最后都出现在vm身上
vm身上的所有属性及 Vue原型上的所有属性，在Vue模板中都能直接使用

Vue中的数据代理

Vue中的数据代理：

通过vm对象来代理data对象中的属性的操作（读/写）
Vue中数据代理的好处

更加方便的操作data中的数据
基本原理
1. 通过Object.defineProperty()把data对象中所有属性都添加到vm上
2. 为每一个添加到vm上的属性，都指定一个getter或setter
3. 在getter/setter内部去操作（读/写）data中对应的属性

在这里插入图片描述

事件处理

事件的基本使用

使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不要用箭头函数，否则this就不是vm
methods中配置的函数，都是被Vue管理的函数，this的指向是vm或者组件实例对象
@click='demo'和@click="demo($event)"效果一样，但是后者可以传参

事件修饰符

.prevent：阻止默认事件（常用）
.stop：阻止事件冒泡（常用）
.once：事件值触发一次（常用）
.capture：使用事件的捕获模式
.self：只有event.target是当前操作的元素时才触发事件
.passive：事件的默认行为立即执行，无需等待事件回调执行完毕（wheel事件）

注意：修饰符可以连续使用（.prevent.stop可以先阻止默认行为后阻止冒泡）

键盘事件

Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”)

退出 => esc

空格 => space

换行 => tab （特殊，必须配合keydown去使用）

上 => up

下 => down

左 => left

右 => right
Vue中没有提供别名的按键，也可以使用按键原始的key值去绑定，但是要注意转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta（win）
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才会被触发
- 配合keydown使用：正常触发事件
也可以使用keyCode去指定具体的按键（Vue3已经移除）
Vue.config.keyCodes.自定义键名= 键码，可以去自定义键名(Vue3已经移除)
可以使用组合键（@keydown.ctrl.c表示按下ctrl+c）

计算属性

定义：要用的属性不存在，要通过已有的属性计算得来
原理：底层借助了Object.defineproperty方法提供的getter和setter
get什么时候执行
- 初次读取时会执行一次
- 当依赖的数据发生改变的时候回被再次调用
备注：get方法里面的this是Vue实例
优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
备注：
- 计算属性最终会出现在vm身上，直接读取使用即可
- 如果计算的属性要修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
- 在引入计算属性的时候，要作为一个属性去引入，而不能看成一个函数

简写属性：

要求：计算属性简写形式中只有get方法而没有set

可以将get省略
直接将属性名作为函数名

computed: {
    // fullName:{
    //     get(){
    //         console.log("diaoyongl");
    //         return this.firstName + '-' + this.lastName;
    //     }
    // }
    // 等同
    fullName() {
        console.log("diaoyongl");
        return this.firstName + '-' + this.lastName;
    }
}

监视属性

监视属性：watch

当被监视的属性变化时，回调函数自动调用，进行相关操作
监视的属性必须存在，才能进行监视

监视的两种写法：

new Vue时传入watch配置

watch:{
    info:{
        immediate:true,	//初始化的时候让handler调用一下
        //info发生变化的时候handle自动调用
        handler(newValue,oldValue){	//参数为新值和旧值
            console.log(newValue, oldValue);
        }
    }
}

通过vm.$watch配置

 vm.$watch('isHot', {
     handler(newValue, oldValue) {	//参数为新值和旧值
         console.log(newValue, oldValue);
     }
 })

深度监视：deep

深度监视：

Vue中的watch默认不监测对象内部值的改变（一层）
配置deep:true可以检测对象内部值改变（多层）

备注：

Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
使用watch时根据数据的具体结构，决定是否采用深度监视

简写属性

要求watch配置中只有handler函数，不能有其他属性

两种写法：

new Vue时传入watch配置

info:{
    handler(newValue,oldValue){
        console.log(newValue, oldValue);
    }
}
// 简写
info(newValue, oldValue){
    console.log(newValue, oldValue);
}

通过vm.$watch配置

vm.$watch('info', {
    handler(newValue, oldValue) {
        console.log(newValue, oldValue);
    }
})
// 简写,注意不能写成箭头函数，this指向会变成window
vm.$watch('info',function(newValue, oldValue){
    console.log(newValue, oldValue);
})

watch与computed对比

区别：

comouted能完成的功能，watch都能完成
watch能完成的功能，computed不一定能完成，例如：watch能进行异步操作

原则：

所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象
所有不被Vue所管理的函数（定时器的回调函数、Ajax的回调函数、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象（如果写成普通函数，this很可能会指向window）

绑定样式

class样式

写法：class='xxx' xxx可以是字符串、对象、数组

字符串写法适用：类名不确定，要动态获取

对象写法适用：要绑定多个样式，名字也不确定，但要动态决定用不用

数组写法适用：要绑定多个样式，名字确定，个数确定，但不确定用不用

style样式

:style = '{fontSize:xxx}'其中xxx是动态值

:style='[a,b]'其中a、b是样式对象

条件渲染

`v-if`

写法：

v-if='表达式'

v-else-if='表达式'

v-else='表达式'
适用：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和：v-else-if、v-else一起使用，但要求结构不能被打断

`v-show`

写法：v-show='表达式'
适用：不展示的DOM元素未被移除，仅仅只是适用display：none隐藏
两者区别：使用v-if时，元素可能会获取不到，但是v-show一定获取得到

列表渲染

`v-for`

用于展示列表数据
语法：v-for='(item,index) in xxx' :key='yyy'
可遍历：数组、对象、字符串（少）、指定次数（少）

key

面试：react、vue中key有什么作用？（key的内部原理）

虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下
对比规则：
1. 旧虚拟DOM中找到了与新虚拟DOM相同的key
  - 若虚拟DOM中内容没变，直接使用之前的真实DOM
  - 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
2. 旧虚拟DOM中未找到与新虚拟DOM相同的key
  - 创建新的真实DOM，随后渲染到页面
用index作为key可能会引发的问题：
1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
  
  会产生没有必要的真实DOM更新 => 界面效果没有问题，但效率低
2. 如果结构中还包括输入类的DOM：
  
  会产生错误DOM更新 => 界面有问题
开发中如何选择key？
1. 最好使用每一条数据的唯一标识作为key，如id，手机号，身份证，学号等唯一值
2. 如果不存在对数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表展示，使用index是没有问题的
两种方式的对比
1. index作为key
1. id作为key

vue监视数据的原理(劫持)

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

收集表单数据

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

若：<input type="password"/>，则v-model收集的是value值，且要给标签配置value值

若：<input type="checkbox"/>

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

配置input的value属性：

v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再控制

number：输入字符串转为有效数字

trim：输入首尾的空格过滤

过滤器

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

语法：

注册过滤器：Vue.filter(name, callback)或 new Vue{filters:{}}
使用过滤器：{{xxx | 过滤器名}}或 v-bind:属性 = "xxx | 过滤器名"

备注：

过滤器也可以接受额外的参数，多个过滤器可以串联
并没有改变原本的数据，是产生新的对应的数据
前一个过滤器返回的数据会返回后一个

内置指令

`v-text`

作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会(插值语法也不能解析)

`v-html`

作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
1. v-html会替换掉节点中的所有内容，{{xxx}}则不会
2. v-html可以识别html结构
严重注意：v-html有安全性问题！！！
1. 在网络上动态渲染任意HTML是非常危险的，容易受到XSS的攻击
2. 一定要在可行的内容上使用v-html，永远不要用在用户提交的内容上
备注：浏览器cookie储存

`v-cloak`

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
```
[v-cloak]{
    display:none;
}
```

`v-once`

v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于性能优化

`v-pre`

跳过其所在节点的编译过程
可利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译

自定义指令

定义语法

局部指令：

new Vue({
    directives:{指定名：配置对象}
})

new Vue({
    directives{指令名：回调函数}
})

全局指令：

Vue.directive(指令名，配置对象)

Vue.directive(指令名，回调函数)

配置对象中的三个回调：
1. bind：指令与元素成功绑定时调用
2. inserted：指令所在元素被插入页面时调用
3. update：指令所在模板结构被重新解析时调用
备注：
1. 指令定义时不加v，使用时要加v-
2. 指令名如果是多个单词，要使用kebab-case的命名方式，不要用camelCase命名
3. 注意自定义指令定义时函数里的this都是window

生命周期

又名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可以更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向是 vm 或组件实例对象
```
new Vue({    mounted(){ }})
```

生命周期的钩子

注：常见的是mounted和beforeDestroy

在这里插入图片描述

关于销毁Vue实例

销毁后借助Vue开发者工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作事件，因为即使操作了，也不会再触发更新流程了

SikW_04_27

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue核心

Vue核心特点采用组件化模式，提高代码复用率，让代码有更高的维护性声明式编码，让编码人员无需直接操作DOM，提高开发效率初识Vue想让Vue工作，就必须先创建一个Vue实例，而且需要传入一些配置对象root容器里面的代码依然符合html规范，只不过混入了一些特殊的Vue语法root容器里的代码被称为[Vue模板]Vue实例和容器是一一对应的真实开发中只要有一个Vue实例，并且会配合着组件一起使用{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
复制链接

扫一扫