01-Vue基础API1. Vue的最大优势是什么? 简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据

1.Vue响应式原理

对象类型 : 通过Object.defineProperty()对属性的读取, 修改进行拦截(数据劫持) 可以通过 $set添加属性.$ delete删除属性

数组类型 : 通过重写更新数组的一系列方法实现拦截, (对数组的变更方法进行了包裹)

vue最独特的特性之一, 数据模型仅仅是普通的js对象, 当我们修改数据模型的时候,视图会进行更新,

v2 => 当我们把一个普通的js对象传入Vue实例作为data选项, vue会遍历此对象的所有property, 并且使用Object.defineProperty, 把这些属性全部转换为getter和setter, 针对用户来说是不可见的, 但是在内部他们让vue能够追踪依赖, 在porperty被访问和修改时通知变更

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

对于对象: Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的 , 可以使用

this.$set(this.someObject,'b',2)
// 赋值多个新 property时
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

对于数组: 当使用索引直接设置一个数组项时arr.items[index] = newValue 不是响应性的

this.$set(vm.items, indexOfItem, newValue)
vm.items.splice(newLength) //直接修改原数组的数组方法

2.v-model 在表单输入元素或组件上创建双向绑定

<input>
<select>
<textarea>
components
.lazy - 监听 change 事件而不是 input
.number - 将输入的合法字符串转为数字
.trim - 移除输入内容两端空格

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

3. 异步更新队列

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。

4. vue修饰符

1. 事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

1. Vue的最大优势是什么?

简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离,

vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单.

相比传统网页, vue是单页面可以只刷新某一部分

2. Vue和jQuery区别是什么?

jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签

Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视频关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能

3. mvvm和mvc区别是什么?

MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联

MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定

4. Vue常用事件修饰符有哪些?

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

5. Vue2.x兼容IE哪个版本以上

不支持ie8及以下，部分兼容ie9 ，完全兼容10以上，因为vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。

6. 对Vue渐进式的理解

渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用

7. v-show和v-if的区别

v-show和v-if的区别? 分别说明其使用场景?

v-show 和v-if都是true的时候显示，false的时候隐藏

但是：false的情况下，

v-show是采用的display:none

v-if采用惰性加载

如果需要频繁切换显示隐藏需要使用v-show

8. 说出至少4个Vue指令及作用

v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签

v-show 显示内容

v-if 显示与隐藏

v-else 必须和v-if连用不能单独使用否则报错

v-bind 动态绑定作用：及时对页面的数据进行更改, 可以简写成:分号

v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面

v-text 解析文本

v-html 解析html标签

9. 为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

10.vue如何提高更新性能

11. Vue 中怎么自定义过滤器

Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式

全局的用Vue.filter()

局部的用filters属性

12. Vue中:key作用, 为什么不能用索引

:key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化 , 判断两个节点是否为相同节点

因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

:key如果是索引, 因为索引是连续的, 如果删除其中某一个, 会导致最后一个被删除

当我们再删除的时候, :key再根据数据来把新旧的dom对比时, 删除:key不存在的对应的标签(添加也是一样的插入到指定位置, 别的都不会动)

13. 数组更新有的时候v-for不渲染

因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / this.$set()

TodoList案例练习心得

案例的核心是在App.vue中操作数据,练习父子组件传值

错误点:

1.计算属性不需要在data里面声明

2.使用事件委托多个按钮

3.如果是通过一些数据计算得来的结果要使用计算属性

4.复杂数据类型应该使用深度监听

vue.config.js 配置文件

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({

devServer:{

host: 'localhost',//指定要使用的 host。

open:true, //告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。

port: 3000, //制定监听请求的端口号

// 关闭eslint检查

lintOnSave:false,

transpileDependencies: true,

// 解决浏览器弹黑窗问题, 设置production 生产模式 development

// mode:"production",

// 其他配置

// lintOnSave: false, //关闭eslint检查,重启服务器即可

// 什么是eslint? 代码检查工具,违反规定就报错

})