Vue2学习笔记（一）——基础篇Vue核心_vue1 vue2 核心功能-CSDN博客

本文链接：https://blog.csdn.net/m0_53507067/article/details/128373598

vue的定义

一套用于构建用户界面的渐进式javaScript框架

vue的特点

1.组件化模式
2.声明式编码（原生js为命令式编码，需写清获取、执行等步骤，声明式只需发出指令如v-for）
3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM。

虚拟DOM即所存的数据，会在数据变化后进行Diff算法比对，只改变必需的真实DOM，如新增的部分数据，而不改动原有DOM。

简单实例

创建vue实例

el指定作用的位置，即容器，也可用示例.$mount(‘#root’)来指定容器
data存储数据，分为对象式和函数式。（组件时只能用函数式，否则报错）
双括号中为js表达式
（注：当出现多个容器对应一个实例或一个容器多个实例时只解析第一个，一个容器只能对应一个实例，一一对应）

指令语法

模板语法主要有两类，插值语法（即双括号插值）用于解析标签体内容，指令语法作用于标签属性，用于解析标签

单向数据绑定，v-bind，可简写为冒号
双向数据绑定，v-model，只能应用在表单类元素（输入类元素）上，可简写为v-model=，后可加修饰符，如v-model.number即绑定表单项为number（input默认返回字符串时可使用），v-model.lazy让表单不会实时返回刷新，形成节流。

mvvm模型

M:模型，data中数据，V：视图，模板代码，VM：试图模型，Vue实例。vm上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
mvvm模型
在这里插入图片描述

数据代理

通过一个对象代理对另一个对象中属性的操作（读/写），让编码更方便。
Object.defineProperty方法可用于定义数据，但相比于直接定义，多了枚举性、可改性等参数的定义。vm获取数据内容实际是通过数据代理中的setter和getter修改了data中的数据。不能直接通过vm获取data，此时data为_data，可通过vm._data获取。

在这里插入图片描述

事件处理

事件的基本使用

使用v-on:xxx 或@xxx 绑定时间，其中xxx是事件名
事件回调需配置在methods对象中，最终会在vm上
methods中配置函数不能用箭头函数，否则this指向就不是vm了，而是window对象（**this
methods中配置的函数，都是被Vue所管理的函数，this.指向vm或组件实例对象

事件修饰符

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

计算属性（computed）

要用的属性不存在，通过已有属性计算得来。在computed中存储计算后返回数据的对象，底层借助Object.defineProperty通过get来实现数据返回，set实现数据修改。相比于调用方法进行计算后返回，多了缓存功能，效率更高。

get调用时机：1.初次读取时，2.所依赖数据发生变化时
set调用时机：当fullName被修改时

确定只读不写时可简写
不写对象，直接写为函数,xxx(){return xxxx}
在这里插入图片描述

监视属性（watch）

当被监视时，变动后回调函数（handler）自动调用；只能监视存在的属性。
两种方式：

watch配置中声明对象以及回调函数（handler），其中两个参数分别为newValue和oldValue。
通过vm.$watch监视。

深度监视
watch默认是无法监视对象中内部属性变化的（一层），可以通过原始’xxx.a’来进行单个属性监视，或配置deep:true来设置监视对象内部值改变（多层）。
可通过配置immediate:true来设置初始化时调用一次handler。
当没有配置项，只有handler时，可直接简写为：监视属性名（newValue,oldValue）{…}
（实际过程中遇到了watch监听父组件传来prop值时不生效状况，在watch中定义immediate:true可解决，暂未探明原因2023.2.16）
在这里插入图片描述

watch与computed区别
4. computed能完成的功能，watch都能完成
5. watch能完成的功能，computed不一定能完成，如定时器异步操作

绑定样式

绑定class样式，通过v-bind:class动态绑定class的值，赋予不同class的样式。绑定值可为字符串、对象、数组。
绑定style样式，绑定值为对象，如:style=“{fontSize:xxx}“其中xxx是动态值；:style=”[a,b]”，其中a、b是样式对象。

页面渲染

条件渲染

写在便签属性中，条件渲染语句后跟表达式，通过true或者false控制。

v-if、v-else-if、v-else为一组语句，且其中不能阻断，阻断后后面的语句失效。会将元素从虚拟dom· 树中删除，引起回流和重绘，相比v-show有更高的切换开销。
v-show，隐藏该元素，但不更改dom树，相当于加了个display:none，但改变了文档流，也会引起回流和重绘。

列表渲染

语法：v-for=“(item,index) in xxx”
v-for循环获取被遍历项（可为数组、对象、字符串、指定次数）中内容进行单个展示，其中有一个特殊标签key，即渲染时的对比标识，对item进行区分，循环体括号中两个参数分别为item和index（下标）。真实dom中并不具备key，key仅为vue中所用
key的原理

数据变化时，虚拟dom进行渲染，会对key进行对比，相同则复用，提高效率。index为key时有可能错乱。 index时有可能错乱
在这里插入图片描述
列表过滤
利用filter方法（返回新数组）对数据进行过滤，注意最好不要修改原数据，而是另建一个数据进行修改并展示。可通过watch（初始化时可采用immediately:ture)、computed（初始化时会自动调用）等方法实现，优先使用computed。
列表排序
利用sort方法（改变原数组）对数据进行排序，指定一个变量来代表排序方式，利用computed进行监测，当该变量改变时，调用sort方法。

vue监测数据原理

在这里插入图片描述
利用数据代理仿写一个简化的监视方法

通过keys处理原数据，避免对原数据直接获取造成无限嵌套。
该方法暂无法深监视，可通过嵌套函数实现。
set中加入dom操作事件，即可实现响应式渲染。

未定义的属性读取不会报错，但没有配置set和get方法，页面中对其进行赋值无法实现响应式，此时可操作vue.set(target,key,val)来设置并挂载，实现响应式渲染，但仍然有局限，无法直接加在data上，只能给data中的某个对象加一个属性。

数组的监视原理

数组本身没有属性，没有getter和setter，通过方法进行监视渲染。被vue管理的数组调用push等改变数组的方法时，不再是调用Array类型原型prototype中的push，而是vue另定义的push。vue主要靠包装原有的push并加入其他方法来实现数据更新渲染。
能够触发变更的方法：pop、push、shift、unshift、splice、sort、reverse。

数据监测总结

在这里插入图片描述
数据劫持：将普通数据加入getter、setter后，修改时会先将数据进行处理，再进行修改。

内置指令

v-text

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

v-html
向指定节点中渲染包含html结构的内容，会替换掉节点中内容，可识别html结构，但具有安全性问题，解析语言有可能被替换，引起xss攻击（以用户之手）。
v-cloak
没有值，本质是一个特殊属性，配合css可以解决网速慢时页面展示出未渲染的{{xxx}}的问题。
v-once
设置v-once的节点只在初始化时渲染，之后不会更新，可用于优化性能。
v-pre
跳过指令所在节点的编译过程，作用于不存在指令语法、插值语法的节点时，可加快编译。

自定义指令

判断某个元素是否为真实DOM的方法：1. 输出console.dir(xx)，看其是否具有所有真实DOM所具备的方法。2. 判断xx instanceof HTMLElement。
通过directives进行声明，形成一个v-xxx的自定义指令并进行使用。
在这里插入图片描述
big函数何时会被调用？