Vue 基础部分(原理篇)

 vue的优势

1.双向数据绑定 ; 2.数据驱动视图 ; 3.组件化开发

 

MVVM和MVC

MVC: m(模型  : 数据) ;  v(视图 : 页面) ; c(控制器 : 在这里写js业务逻辑，把数据M 渲染到 视图 V )

MVVM: m(模型  : 数据) ;  v(视图 : 页面) ; vm(视图模型) 通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

• V （修改视图） -> M（数据自动同步）

• M（修改数据） -> V （视图自动同步）

 

vue"渐进式"的理解

官方:1.主张最少 ; 2.自底向上 ; 3.增量开发 ; 4.组件集合 ; 5.便于复用

我的理解:使用模块化规范, 实现自助餐式开发, 用什么导什么, 最大程度上节省资源

vue的常见指令及作用 

v-text  : 解析文本

v-html : 解析html标签

v-if : 显示与隐藏

v-else : 必须和 v-if 连用 , 否则报错

v-show : 显示内容

v-for : 遍历数组

v-slot : 缩写为# , 组件插槽

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

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

v-model : 只能用于表单 , 双向绑定数据 , 同步内容

 避免 v-if 和 v-for 一起使用

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

v-show 和 v-if 的区别 

相同点:两者都是true显示 , false隐藏

不同点: 1.v-show 一定会渲染,只是修改display属性 , v-if 根据判断条件渲染

             2.应用场景不同 , v-show用于频繁切换 ,反之用v-if

 

Vue中key值作用

key值的作用是给元素添加一个唯一的标识符，提高vue渲染性能。当数据变化的时候，vue就会使用diff算法对比新旧虚拟Dom。 如果遇到相同的key值，则复用元素。如果遇到不同的key值则强制更新。

 :key值为什么不能用索引

因为用了索引和没用， 没啥区别（用了等于没用）

• :key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化

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

 

Vue中有时候数组会更新页面，有时候不更新

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

 这些方法会触发数组改变, v-for会监测到并更新页面:

1.push  2.pop  3.shift  4.unshift  5.splice  6.sort  7.reberse

这些方法不会触发v-for更新:

1.slice  2.filter  3.concat

方法和计算属性和侦听器区别

方法:1.需要主动调用 2.不会缓存 

计算属性: 1.监听多个属性,只要计算属性内的数据发生变化就会触发  2.有缓存机制

侦听器: 1.监听一个属性 2.watch支持异步 3.不会缓存

 侦听器和计算属性区别:

1.计算属性有缓存机制,侦听器没有

2.侦听器支持异步,计算属性不支持

3.计算属性是一个额外新增的属性,