1. 技术文章
  2. Vue 技术栈 快速学习 前端面试

Vue 技术栈 快速学习 前端面试

由 大憨熊 提交于 2020-03-01 20:27:06

起因

一直想着要写一定深度的文章，然后觉得学习Vue是一个好的过程，本文将带你走进Vue的世界，支持国内框架！ 如果看完本文还不懂Vue是什么的小伙伴，可以随便打博主！（斜眼笑），前方高能，本文可能篇幅比较长，建议收藏在闲暇时间学习，也欢迎伙伴们讨论留言学习！

Vue -渐进式JavaScript框架

介绍

库和框架的区别

Library
库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者
  • 代表：jQuery
  • jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作
Framework
框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
  • 框架规定了自己的编程方式，是一套完整的解决方案
  • 使用框架的时候，由框架控制一切，我们只需要按照规则写代码
主要区别

  • You call Library, Framework calls you

  • 核心点：谁起到主导作用（控制反转）

    框架中控制整个流程的是框架
    使用库，由开发人员决定如何调用库中提供的方法（辅助）

  • 好莱坞原则：Don’t call us, we’ll call you.

  • 框架的侵入性很高（从头到尾）

MVVM的介绍

  • MVVM，一种更好的UI模式解决方案
  • 从Script到Code Blocks、Code Behind到MVC、MVP、MVVM - 科普
MVC
  • M: Model 数据模型（专门用来操作数据，数据的CRUD）
  • V：View 视图（对于前端来说，就是页面）
  • C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）
MVVM组成
  • MVVM ===> M / V / VM
  • M：model数据模型
  • V：view视图
  • VM：ViewModel 视图模型
优势对比

  • MVC模式，将应用程序划分为三大部分，实现了职责分离

  • 在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM

  • MVVM通过数据双向绑定让数据自动地双向同步

    V（修改数据） -> M
    M（修改数据） -> V
    数据是核心

  • Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM

Vue中的MVVM
虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例
学习Vue要转化思想
  • 不要在想着怎么操作DOM，而是想着如何操作数据！！！

起步 - Hello Vue

  • 安装：npm i -S vue
<!-- 指定vue管理内容区域，需要通过vue展示的内容都要放到找个元素中  通常我们也把它叫做边界 数据只在边界内部解析-->
<div id="app">{{ msg }}</div>

<!-- 引入 vue.js -->
<script src="vue.js"></script>

<!-- 使用 vue -->
<script>
  var vm = new Vue({
    // el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
    el: '#app',
    // Vue 实例的数据对象，用于给 View 提供数据
    data: {
      msg: 'Hello Vue'
    }
  })
</script>
Vue实例
  • 注意 1：先在data中声明数据，再使用数据
  • 注意 2：可以通过 vm.$data 访问到data中的所有属性，或者 vm.msg
var vm = new Vue({
  data: {
    msg: '大家好，...'
  }
})

vm.$data.msg === vm.msg // true
数据绑定
  • 最常用的方式：Mustache(插值语法)，也就是 {{}} 语法
  • 解释：{{}}从数据对象data中获取数据
  • 说明：数据对象的属性值发生了改变，插值处的内容都会更新
  • 说明：{{}}中只能出现JavaScript表达式 而不能解析js语句
  • 注意：Mustache 语法不能作用在 HTML 元素的属性上
<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no' }}</p>

<!-- ！！！错误示范！！！ -->
<h1 title="{{ err }}"></h1>

双向数据绑定 Vue two way data binding

  • 双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响

    数据的改变会引起DOM的改变
    DOM的改变也会引起数据的变化

  • 原理：Object.defineProperty中的get和set方法

    getter和setter：访问器
    作用：指定读取或设置对象属性值的时候，执行的操作

  • Vue - 深入响应式原理

  • MDN - Object.defineProperty()

/*  defineProperty语法 介绍 */
var obj = {}
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
  set: function (newVal, oldVal) {  },
  // 读取 obj.msg 时get方法会被系统调用
  get: function ( newVal, oldVal ) {}
})
Vue双向绑定的极简实现
<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>

<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'),
    obj = {}

// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg  当obj.msg反生改变时set方法将会被调用  
  set: function (newVal) {
    // 当obj.msg被赋值时 同时设置给 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})

// 监听文本框的改变 当文本框输入内容时 改变obj.msg
txt.addEventListener('keyup', function (event) {
  obj.msg = event.target.value
})
</script>
动态添加数据的注意点

  • 注意：只有data中的数据才是响应式的，动态添加进来的数据默认为非响应式

  • 可以通过以下方式实现动态添加数据的响应式

    1. Vue.set(object, key, value) - 适用于添加单个属性
    2. Object.assign() - 适用于添加多个属性
var vm = new Vue({
  data: {
    stu: {
      name: 'jack',
      age: 19
    }
  }
})

/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')

/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/
vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })
异步DOM更新

  • 说明：Vue 异步执行 DOM 更新，监视所有数据改变，一次性更新DOM

  • 优势：可以去除重复数据，对于避免不必要的计算和 避免重复 DOM 操作上，非常重要

  • 如果需要拿到更新后dom中的数据 则需要通过 Vue.nextTick(callback)：在DOM更新后，执行某个操作（属于DOM操作）

    实例调用vm.$nextTick(function () {})

methods: {
  fn() {
    this.msg = 'change'
    this.$nextTick(function () {
      console.log('$nextTick中打印：', this.$el.children[0].innerText);
    })
    console.log('直接打印：', this.$el.children[0].innerText);
  }
}

指令

  • 解释：指令 (Directives) 是带有 v- 前缀的特殊属性
  • 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
v-text
  • 解释：更新DOM对象的 textContent
<h1 v-text="msg"></h1>
v-html
  • 解释：更新DOM对象的 innerHTML
<h1 v-html="msg"></h1>
v-bind
  • 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
  • 语法：v-bind:title="msg"
  • 简写：:title="msg"
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on
  • 作用：绑定事件
  • 语法：v-on:click="say" orv-on:click="say('参数', $event)"
  • 简写：@click=“say”
  • 说明：绑定的事件定义在methods
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
事件修饰符
  • .stop 阻止冒泡，调用 event.stopPropagation()
  • .prevent 阻止默认行为，调用 event.preventDefault()
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
  • .once 事件只触发一次
v-model
  • 作用：在表单元素上创建双向数据绑定
  • 说明：监听用户的输入事件以更新数据
  • 案例：计算器
<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-for
  • 作用：基于源数据多次渲染元素或模板块
<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>
key属性
  • 推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
  • 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元
    素。
  • vue key
  • vue key属性的说明
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

样式处理 -class和style

  • 使用方式：v-bind:class="expression" or :class="expression"
  • 表达式的类型：字符串、数组、对象（重点）
  • 语法：
<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===> 解析后
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>解析后
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定义的对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
v-if 和 v-show
  • 条件渲染
  • v-if：根据表达式的值的真假条件，销毁或重建元素
  • v-show：根据表达式之真假值，切换元素的 display CSS 属性
<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>
提升性能：v-pre
  • 说明：vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
<span v-pre>{{ this will not be compiled }}</span>
提升性能：v-once
  • 说明：vue只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<span v-once>This will never change: {{msg}}</span>

过滤器 filter

  • 作用：文本数据格式化
  • 过滤器可以用在两个地方：{{}}和 v-bind 表达式
  • 两种过滤器：1 全局过滤器 2 局部过滤器
全局过滤器
  • 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
  • 注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例
  • 显示的内容由过滤器的返回值决定
Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})
  • 示例：
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>

<script>
  Vue.filter('date', function(value, format) {
    // value 要过滤的字符串内容，比如：dateStr
    // format 过滤器的参数，比如：'YYYY-MM-DD hh:mm:ss'
  })
</script>
局部过滤器
  • 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用
{
  data: {},
  // 通过 filters 属性创建局部过滤器
  // 注意：此处为 filters
  filters: {
    filterName: function(value, format) {}
  }
}

按键值修饰符

  • 说明：在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
  • 键盘事件 - 键值修饰符
  • 其他：修饰键（.ctrl等）、鼠标按键修饰符（.left等）
// 只有在 keyCode 是 13 时调用 vm.submit()
@keyup.13="submit"
// 使用全局按键别名
@keyup.enter="add"

---

// 通过全局 config.keyCodes 对象自定义键值修饰符别名
Vue.config.keyCodes.f2 = 113
// 使用自定义键值修饰符
@keyup.enter.f2="add"

监视数据变化 - watch

  • 概述：watch是一个对象，键是需要观察的表达式，值是对应回调函数
  • 作用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操作
  • VUE $watch
new Vue({
  data: { a: 1, b: { age: 10 } },
  watch: {
    a: function(val, oldVal) {
      // val 表示当前值
      // oldVal 表示旧值
      console.log('当前值为：' + val, '旧值为：' + oldVal)
    },

    // 监听对象属性的变化
    b: {
      handler: function (val, oldVal) { /* ... */ },
      // deep : true表示是否监听对象内部属性值的变化 
      deep: true
    },

    // 只监视user对象中age属性的变化
    'user.age': function (val, oldVal) {
    },
  }
})

计算属性

  • 说明：计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会重新求值
  • 注意：Mustache语法（{{}}）中不要放入太多的逻辑，否则会让模板过重、难以理解和维护
  • 注意：computed中的属性不能与data中的属性同名，否则会报错
  • Vue computed属性原理
var vm = new Vue({
  el: '#app',
  data: {
    firstname: 'jack',
    lastname: 'rose'
  },
  computed: {
    fullname() {
      return this.firstname + '.' + this.lastname
    }
  }
})

实例生命周期

  • 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。
  • 实例生命周期也叫做：组件生命周期
生命周期介绍
  • vue生命周期钩子函数
  • 简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！

  • 注意：Vue在执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
  • 注意：钩子函数的名称都是Vue中规定好的！
钩子函数 - beforeCreate()
  • 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
  • 注意：此时，无法获取 data中的数据、methods中的方法
钩子函数 - created()
钩子函数 - beforeMounted()

说明：在挂载开始之前被调用

钩子函数 - mounted()

说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()
  • 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  • 注意：此处获取的数据是更新后的数据，但是获取页面中的DOM元素是更新之前的
钩子函数 - updated()
  • 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
钩子函数 - beforeDestroy()
  • 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
  • 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等
钩子函数 - destroyed()
  • 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

axios

  • Promise based HTTP client for the browser and node.js

    以Promise为基础的HTTP客户端，适用于：浏览器和node.js
    封装ajax，用来发送请求，异步获取数据

  • 安装：npm i -S axios

  • axios

// 在浏览器中使用，直接引入js文件使用下面的GET/POST请求方式即可
// 1 引入 axios.js
// 2 直接调用axios提供的API发送请求
created: function () {
  axios.get(url)
    .then(function(resp) {})
}

---
// 配合 webpack 使用方式如下：
import Vue from 'vue'
import axios from 'axios'
// 将 axios 添加到 Vue.prototype 中
Vue.prototype.$axios = axios

---
// 在组件中使用：
methods: {
  getData() {
    this.$axios.get('url')
      .then(res => {})
      .catch(err => {})
  }
}

---
// API使用方式：

axios.get(url[, config])
axios.post(url[, data[, config]])
axios(url[, config])
axios(config)
Get 请求
const url = 'http://vue.studyit.io/api/getnewslist'

// url中带有query参数
axios.get('/user?id=89')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// url和参数分离，使用对象
axios.get('/user', {
  params: {
    id: 12345
  }
})
Post 请求
  • 不同环境中处理 POST请求
  • 默认情况下，axios 会将JS对象序列化为JSON对象。为了使用 application/x-www-form-urlencoded 格式发送请求，我们可以这样：
// 使用 qs 包，处理将对象序列化为字符串
// npm i -S qs
// var qs = require('qs')
import qs from 'qs'
qs.stringify({ 'bar': 123 }) ===> "bar=123"
axios.post('/foo', qs.stringify({ 'bar': 123 }))

// 或者：
axios.post('/foo', 'bar=123&age=19')

const url = 'http://vue.studyit.io/api/postcomment/17'
axios.post(url, 'content=点个赞不过份')

axios.post('/user', qs.stringify({
    firstName: 'Fred',
    lastName: 'Flintstone'
  }))
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
全局配置
// 设置请求公共路径：
axios.defaults.baseURL = 'http://vue.studyit.io'
拦截器
  • 拦截器会拦截发送的每一个请求，请求发送之前执行request中的函数，请求发送完成之后执行response中的函数
标签
vue
mvvm
dom
钩子函数
前端开发
函数调用
设计模式
前端框架
前端组件
url
dom对象
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!