Vue核心概念及特性-一

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

特点: 易用，灵活，高效，渐进式框架。

可以随意组合需要用到的模块 vue + components + vue-router + vuex + vue-cli

一.Vue 的概念和特性

1. 什么是库，什么是框架？

• 库是将代码 集合 成一个产品，我们可以调用库中的方法实现自己的功能。
• 框架则是为 解决一类问题 而开发的产品，我们在指定的位置编写好代码，使用时框架帮我们调用。

框架与库之间最本质区别在于控制权：you call libs, frameworks call you.

Vue 属于框架

2.MVC 模型 && MVVM 模型

在传统的 mvc 中除了 model 和 view 以外的逻辑都放在了 controller 中，导致 controller 逻辑复杂难以维护, 在 mvvm 中 view 和 model 没有直接的关系，全部通过 viewModel 进行交互

Vue 是 MVVM 模式

3. 声明式和命令式

• 自己写 for 循环就是命令式 (命令其按照自己的方式得到结果)
• 声明式就是利用数组的方法 forEach (我们想要的是循环，内部帮我们去做)

二.Vue 的基本使用

1.mustache 语法

允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。在使用数据前需要先声明：

• 编写三元表达式
• 获取返回值
• JavaScript 表达式

<div id="app">
    {{1+1}}
    {{msg == 'hello'?'yes':'no'}}
    {{{name:1} }}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
    el:'#app',
    data:{msg:'hello'}
})
</script>

2. 响应式数据变化

Vue 中使用 Object.defineProperty 重新将对象中的属性定义，如果是数组的话需要重写数组原型上的方法

function notify() {console.log('视图更新')
}
let data = {
    name: 'youxuan',
    age: 18,
    arr: [1,2,3]
}
// 重写数组的方法
let oldProtoMehtods = Array.prototype;
let proto = Object.create(oldProtoMehtods);
['push', 'pop', 'shift', 'unshift'].forEach(method => {proto[method] = function (...args) {
        let inserted;
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args;
                break;
        }
        observerArray(inserted)
        notify();
        oldProtoMehtods[method].call(this, ...args)
    }
})
function observerArray(obj) { // 观察数组中的每一项
    for (let i = 0; i < obj.length; i++) {observer(obj[i]);
    }
}
function observer(obj) {if(typeof obj !== 'object'){return obj}
    if (Array.isArray(obj)) {
        obj.__proto__ = proto
        observerArray(obj);
    }else{for (let key in obj) {defineReactive(obj, key, obj[key]);
        }
    }
}
function defineReactive(obj, key, value) {observer(value); // 再一次循环 value
    Object.defineProperty(obj, key, { // 不支持数组
        get() {return value;},
        set(val) {notify();
            observer(val);
            value = val;
        }
    });
}
observer(data);
data.arr.push({name:'jw'})
console.log(data.arr);

· 缺陷

• 不能通过通过长度、索引改变数组
• 不能给对象新增属性
• 需要通过 vm.$set 和vm.$delete方法强制添加 / 删除响应式数据

3.Vue 实例上的方法

• vm.$el;
• vm.$data;
• vm.$options;
• vm.$nextTick();
• vm.$mount();
• vm.$watch();
• vm.$set();

三.Vue 中的指令

在 vue 中 指令 (Directives) 是带有 v- 前缀的特殊特性, 主要的功能就是操作 DOM

1.v-once

<div v-once>{{state.count}} </div>

2.v-html

永远不要对用户输入使用 v -html，可能会导致xss 攻击

<div v-html="text"></div>

3.v-bind

动态绑定属性需要使用 v-bind 进行绑定

<img v-bind:src="src">

可以使用: 来简写 v-bind

4.v-for

<template v-for="(fruit,index) in fruits" >
    <li :key="`item_${index}`">{{fruit}}</li>
    <li :key="`fruit_${index}`">{{fruit}}</li>
</template>

多个元素循环时外层需要增加 template 标签，需要给真实元素增加 key，而且key 不能重复，尽量不要采用索引作为 key 的值

举个 key 值的例子:

5.v-if/v-else/v-show

v-if可以切换 DOM 元素是否存在，并且 v-if 为false时内部指令不会被执行
v-show可以控制元素的显示及隐藏，主要控制的是元素样式

6.v-on

• 事件的绑定 v-on 绑定事件
• 事件修饰符 (.stop .prevent) .capture .self .once .passive

7.v-model

双向数据绑定

<input type="text" :value="value" @input="input">
<input type="text" v-model="value">

四. 面试题环节

• 请说下对于 MVVM 的理解
• Vue 实现数据双向绑定的原理
• Vue 常用的指令有哪些
• v-model 的原理
• v-if 和 v-show 区别
• Vue 中 key 值的作用

欢迎关注 [前端优选] 精彩文章，等你来看！