VUE

VUE

一、基本介绍

1.基础

1.设计模式

1. MVC
   业务逻辑，数据，界面显示分离，改变交互不需要改变业务逻辑。
   优点：耦合性低，生命周期成本低，重用性高
   缺点：模型视图严格分离
2. MVP
   数据层，视图层，发布层，在视图中不直接使用model,之间的通信通过Presenter进行，交互都在其中，而MVC中直接从model中读取数据。
3. MVVM
   利用一些指令绑定，就能在model和viewModel保持不变的情况下，将ui与逻辑分离，model代表我们所需要的数据模型，不会影响浏览器如何展示数据。

2.双向绑定原理

通过数据劫持(object.defineProperty())和发布订阅者模式实现。

var Book = {
    name: '124436466'
};
var name = "";
console.log(Book.name) // 124436466
    Object.defineProperty(Book, 'name', {
    set (value) {
        name = value;
        console.log('你取了一个书名叫做' + value) // 你取了一个书名叫做123
    },
    get () {
        return '《' + name + '》'
    }
})
console.log(Book.name) // 《》 ---- 调用的是get方法
Book.name = '123' // 相当于调用的是set方法
console.log(Book.name) // 《123》
console.log(Book)

原理：
实现一个监听器Observer，用来劫持和监听所有属性，如有变动就通知订阅者。
实现一个订阅者，收到属性变化通知响应函数从而更新视图。
实现一个解析器，可以扫描和解析每隔节点的相关指令。

3.表达式与指令

1. 指令

v-if v-else  v-show
v-for循环,v-on绑定事件  @click
v-bind 绑定属性
v-slot,v-once

2. class 绑定
   也可为数组

4.条件判断

v-if 运行时消耗更大
v-show 显示还是隐藏 初始渲染效果，只是display:none

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

5.事件

v-on:click="fn()"

阻止事件冒泡@click.stop()=“fn()”
阻止默认事件@click.prevent()
.capture 添加事件监听器时事件捕获模式，即元素本身触发的事件先在处理，然后才交友元素内部处理。
.once 点击事件只会触发一次
按键修饰符
event.keyCode==13
.up .shift
表单输入与绑定
v-model
唯一特殊的就是checkout,初始为数组表示多选，初始值为boolean表示真假
表单修饰符
v-model.lazy失去焦点或者回车才会运算
v-model.trim 得到的值去除两端空格

6.计算属性

computed:{
	msg(){
		return this.msg+"aa";
	}
}
//计算属性依据data初始数据转换而来

7.侦听属性和监听属性

watch:

 watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  },

计算属性 vs 侦听属性
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，通常更好的做法是使用计算属性而不是命令式的 watch 回调
复杂的业务逻辑使用计算属性
算属性的 getter 函数是没有副作用的
计算属性缓存 vs 方法
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代！！计算属性将不再更新，相比之下，每当触发重新渲染时，调用方法将总会再次执行函数

2.生命周期

mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例
created 钩子可以用来在一个实例被创建之后执行代码