【前端】vue基础

1.MVVM设计模式

mvvm即Model-View-ViewModel，mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新；如下图所示:

ViewMode是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View。
MVVM 设计模式进行开发的时候，是面向数据编程。即极大程度的简化了代码量。这大量的代码，几乎都来自于以前的 DOM 操作。

2.vue响应式原理

⑴什么是响应式

“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
举例:
对于模板:

<div id="root">{{ name }}</div>

创建vue组件:

var vm = new Vue({
  el: '#root',
  data: {
    name: 'luobo'
  }
})

代码执行后，页面上会显示luobo
如果我们想改变显示，只需要vm.name= ‘heidou’，而不需要手动去更新属性。

⑵响应式原理

vue的响应式的原理的核心是观察者模式。
①Object.defineProperty方法
使用 Object.defineProperty 可以为对象中的每一个属性，设置 get 和 set 方法
Object.defineProperty 可以为属性设置很多特性，例如 configurable，enumerable，但是现在不过多解释，重点只放在 get 和 set
当属性被访问时，触发get函数，当属性被赋值时，触发set函数。

②依赖收集
data中声明的每一个属性都拥有一个数组，保存着谁使用了它。
比如name属性页面A,B,C是用了它，则name把A,B,C的watch保存在数组里。这样当它改变时就会通知依赖它的界面进行更新。不仅仅是页面，也有可能是computed等，我们暂且全都用页面来说。
专业点就是两步:

• data 中每个声明的属性，都会有一个 专属的依赖收集器 subs
• 当页面使用到 某个属性时，触发get函数，此时页面的 watcher 就会被 放到 依赖收集器 subs 中

③依赖更新
当属性进行改变时，会使用set方法，那么属性就会遍历自己的依赖收集器，让它们通知对应的页面重新读取属性，然后完成渲染。

3.vue生命周期

⑴声明周期

• beforeCreate:组件创建前
• created：组件创建
• beforeMount：组件挂载前
• mounted：组件挂载
• beforeUpdate：组件更新前
• updated：组件更新
• beforeDestroy：组件销毁前
• destroyed：组件销毁

⑵作用

借助于组件各个阶段的钩子可以对组件有更好的利用和扩展。

4.slot

①什么是slot

slot可以将html从父组件传入子组件。

②单个插槽(默认插槽，匿名插槽)

单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。
假定 my-component 组件有如下模板:

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

父组件模板:

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

渲染结果:

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

③具名插槽

可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。
仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。
假定 app-layout 组件有如下模板:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件模板:

<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

渲染结果:

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
 </div>

④作用域插槽

作用域插槽就是 “带数据的插槽”，插槽作用域则是子组件给父组件提供数据，父组件提供样式。
下面的例子，你就能看到，父组件提供了三种样式(分别是flex、ul、直接显示)，都没有提供数据，数据使用的都是子组件插槽自己绑定的那个数组（一堆人名的那个数组）:

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>

    </child>

    <!--第二次使用：用列表展示数据-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>

    </child>

    <!--第三次使用：直接显示数据-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>

    </child>

    <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
    <child>
      我就是模板
    </child>
  </div>
</template>

子组件：

<template>
  <div class="child">

    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

输出:

5.vue和react的异同

⑴相同点

• 虚拟DOM
• 提供响应式和可组合性的视图组件
• 在重点放在核心库，关注像路由和全局状态的管理的处理来自于第三方库

⑵不同点

• 在react中某个组件的状态改变，react会把此组件以及此组件的所有后代组件重新渲染，而vue精确知晓那个需要被渲染
• react使用Redux,Vue使用vuex作状态管理

6.vue渲染模板时怎么保留模板中的HTML注释

comments当设为 true 时，将会保留且渲染模板中的 HTML 注释

7.Vue.observable()

相当于一个简单的vuex，跨组件数据状态共享。

8.vue中的scoped属性

在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。

9.父子组件通讯方式

• 在vue中，父向子传递数据，直接通过props传递
• 子向父传递数据，可用$emit，将数据作为参数传递，但是在vue的template中，不需要在该方法后面接受参数
• 父子直接的数据传递，也可以通过store实现数据的同步

10.vue强制刷新组件

⑴什么时候采用强制刷新

通过动态的赋值，但是dom没有及时更新，能够获取到动态赋的值，但是无法获取到双向绑定的dom节点，这就需要我们手动进行强制刷新组件。

⑵强制刷新的方法

我们就需要一种 hack 的方式来强制子组件重置到初始状态

<component v-if="hackReset"></component>
this.hackReset = false
this.$nextTick(() => {
this.hackReset = true
})

11.vue异常

⑴errorHandler(重要)

这是Vue中最广泛使用的异常处理方式

⑵warnHandler(不适用生产环境)

捕获warning

⑶renderError(不适用生产环境）

捕获error

⑷errorCaptured

这个error Handler只能在父组件中处理子组件的错误。据我所知，我们没法直接在Vue的主实例(main instance)中使用它。

⑸window.onerror (不仅仅针对Vue，重要)

最后也是最重要的一个候选项 window.onerror。它是一个全局的异常处理函数，可以抓取所有的JavaScript异常。

12.表单修饰符

⑴.lazy

lazy 修饰符修改 input 触发为 change 触发，也就是在失去焦点 或者 按下回车键时才更新。

⑵.number

number 修饰符可以将返回结果自动转化为 Number 类型，否则就是 String 类型

⑶.trim

trim 过滤首尾空格符

13.按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

14.事件修饰符

⑴.stop

等同于JavaScript中的event.stopPropagation()，防止事件冒泡

⑵.prevent

等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）

⑶.capture

与事件冒泡的方向相反，事件捕获由外到内

⑷.self

只会触发自己范围内的事件，不包含子元素

⑸.once

只会触发一次

15.组件互相访问

⑴访问子组件

子组件上定义ref=“refName”, 父组件的方法中用 this.$refs.refName.method 去调用子组件方法
子组件

<template>
  <div>
    childComponent
  </div>
</template>
 
<script>
  export default {
    name: "child",
    methods: {
      childClick(e) {
        console.log(e)
      }
    }
  }
</script>

父组件

<template>
  <div>
    <button @click="parentClick">点击</button>
    <Child ref="mychild" />   //使用组件标签
  </div>
</template>
 
<script>
  import Child from ‘./child‘;   //引入子组件Child
  export default {
    name: "parent",
    components: {
      Child    // 将组件隐射为标签
    },
    methods: {
      parentClick() {
        this.$refs.mychild.childClick("我是子组件里面的方法");  // 调用子组件的方法childClick
      }
    }
  }
</script>

⑵访问父组件$parent

⑶访问根实例$root

16.