vue简析

vue简析

vue的优点

• 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

• 可重用性：可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

• 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

• 可测试：界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

vue.cli中怎样使用自定义的组件？

• 在components目录新建组件文件（indexPage.vue），script一定要export default {}

• 在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’

• 注入到vue的子组件的components属性上面,components:{indexPage}

• 在template视图view中使用

<template>
  <div id="app">
    <!--3、引用自定义组件-->
    <index-page></index-page>
  </div>
</template>

<script>
// 1、导入自定义组件 indexPage即indexPage.vue组件里面设置的name值
import indexPage from "./components/indexPage"
export default {
  name: 'App',
  // 2、添加自定义组件
  components:{
    indexPage
  }
}
</script>

vue如何实现按需加载配合webpack设置

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。

不进行页面按需加载引入方式：import home from ‘…/…/common/home.vue’

进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’)))

vue如何让CSS只在当前组件中起作用

在组件中的style前面加上scoped

<style scoped>
		div{
				background:red;
			}
</style>

对keep-alive 的了解

keep-alive是 Vue 内置的一个组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素。可以使被包含的组件保留状态，或避免重新渲染。

当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。

使用方法

<keep-alive include='include_components' exclude='exclude_components'>
  <component>
    <!-- 该组件是否缓存取决于include和exclude属性 -->
  </component>
</keep-alive>

参数解释

• include - 字符串或正则表达式，只有名称匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
• include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。

使用示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<keep-alive include="a,b">
  <component></component>
</keep-alive>

<!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) -->
<keep-alive :include="/a|b/">
  <component></component>
</keep-alive>

<!-- Array (需要使用 v-bind，被包含的都会被缓存) -->
<keep-alive :include="['a', 'b']">
  <component></component>
</keep-alive>

Vue中引入组件的步骤

• 采用ES6的import … from …语法或CommonJS的require()方法引入组件

• 对组件进行注册,代码如下

// 注册
Vue.component(‘my-component’, { template:’

A custom component!

'})

指令v-el的作用

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例

vue1.0中的v-el和v-ref在2.0中被废弃了。

所以2.0中如果需要此功能要通过ref属性写法不是ref:而是ref=“名字”

在js中用$refs获取元素

在Vue中使用插件的步骤

vue使用插件的流程

采用ES6的import … from …语法或CommonJSd的require()方法引入插件

使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })

例子：使用router插件

import Vue from "vue";

import VueRouter from "vue-router";

Vue.use(VueRouter);

active-class是哪个组件的属性？

active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换

在vue-router中要使用active-class有两种方法：

1、直接在路由js文件中配置linkActiveClass

export default new Router({
  linkActiveClass: 'active',
})

2、在router-link中写入active-class

<router-link to="/home" class="menu-home" active-class="active">首页</router-link>

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

• to：route即将进入的目标路由对象，

• from：route当前导航正要离开的路由

• next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

vue-router 有哪几种导航钩子

第一种：全局导航钩子

1. 前置守卫

//单独设置每个路由的属性：
meta: { may: true }
router.beforeEach((to, from, next) => {
    if (to.matched.some(item => item.meta.may)) {
        let id = window.localStorage.getItem("id")
        if (id) {
            next()
        } else {
            next({ name: "login" })
        }
    } else {
        next()
    }
})

注意：next 方法必须要调用，否则钩子函数无法 resolved

2. 后置钩子

router.afterEach((to,from) => {
	if(to.meta && to.meta.title){
		document.title = to.meta.title
	}else{
		document.title = "666"
	}
})

第二种：单独路由独享钩子

{
    path: '/home',
    name: 'home',
    component: Home,
    beforeEnter(to, from, next) {
        if (window.localStorage.getItem("id")) {
            next()
        } else {
            next({ name: "login" })
        }
    }
}

第三种：组件内的钩子

beforeRouteEnter(to, from, next) {
    // do someting
    // 在渲染该组件的对应路由被 confirm 前调用
},
beforeRouteUpdate(to, from, next) {
    // do someting
    // 在当前路由改变，但是依然渲染该组件是调用
},
beforeRouteLeave(to, from ,next) {
    // do someting
    // 导航离开该组件的对应路由时被调用
}

全局解析守卫

router.beforeResolve 注册一个全局守卫，和 router.beforeEach 类似

vue-loader是什么？使用它的用途有哪些？

解析和转换.vue文件。提取出其中的逻辑代码 script,样式代码style,以及HTML 模板template，再分别把他们交给对应的loader去处理

用途：js可以写es6,style样式可以写scss或less、template可以加jade等

css-loader：加载由vue-loader提取出的CSS代码

vue-template-compiler：把vue-loader提取出的HTML模板编译成可执行的jacascript代码

scss是什么？在vue.cli中的安装使用步骤

scss是css的预编译。

使用步骤：

• 先装css-loader、node-loader、sass-loader等加载器模块

• 在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss

• 在同一个文件，配置一个module属性

• 然后在组件的style标签加上lang属性 ，例如：lang=”scss”

vue-cli如何新增自定义指令

1.创建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

vue中使用key的原因

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。

为什么避免 v-if 和 v-for 用在一起

当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，只检查它一次，且不会在 v-if 为否的时候运算 v-for。

VNode是什么？虚拟 DOM是什么？

Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。

Vue中如何监控某个属性值的变化

比如现在需要监控data中，obj.a 的变化。Vue中监控对象属性的变化你可以这样：

watch: {
      obj: {
      handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }
  }

deep属性表示深层遍历，但是这么写会监控obj的所有属性变化，并不是我们想要的效果，所以做点修改：

watch: {
   'obj.a': {
      handler (newName, oldName) {
        console.log('obj.a changed')
      }
   }
  }

还有一种方法，可以通过computed 来实现，只需要：

computed: {
    a1 () {
      return this.obj.a
    }
}

利用计算属性的特性来实现，当依赖改变时，便会重新计算一个新值。

delete和Vue.delete删除数组的区别

delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete直接删除了数组 改变了数组的键值。

Vue 组件中 data 为什么必须是函数

在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。

当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的

Vue组件间的参数传递

Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信

（1）props / $emit 适用 父子组件通信
这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

（2）ref 与 children 适用 父子组件通信
ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
children：访问父 / 子实例

（3）EventBus （on） 适用于 父子、隔代、兄弟组件通信
这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

（4）listeners 适用于 隔代组件通信
：包含了父作用域中不被所识别且获取的特性绑定和除外。当一个组件没有声明任何时，这里会包含所有父作用域的绑定和除外，并且可以通过attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
：包含了父作用域中的不含修饰器的事件监听器。它可以通过listeners" 传入内部组件

（5）provide / inject 适用于 隔代组件通信
祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex 适用于 父子、隔代、兄弟组件通信
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样可以方便地跟踪每一个状态的变化。

Vue的路由实现：hash模式 和 history模式

hash模式： 在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式： history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。

要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是 app 依赖的页面。

vue如何自定义一个过滤器

html代码：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

JS代码：

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数。

vue的计算属性

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
好处：

• 使得数据处理结构清晰-
• 依赖于数据，数据更新，处理结果自动更新-
• 计算属性内部this指向vm实例-
• 在template调用时，直接写计算属性名即可
• 常用的是getter方法，获取数据，也可以使用set方法改变数据
• 相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

vue等单页面应用及其优缺点

优点： Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点： 不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。

v-on可以监听多个方法吗？

可以
。

$nextTick的使用

当修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。

vue常用的修饰符

• .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
• .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
• .capture：与事件冒泡的方向相反，事件捕获由外到内；
• .self：只会触发自己范围内的事件，不包含子元素；
• .once：只会触发一次

vue的两个核心点

数据驱动、组件系统
数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

Vue-router跳转和location.href有什么区别

• 使用location.href='/url’来跳转，简单方便，但是刷新了页面；
• 使用history.pushState(‘/url’)，无刷新页面，静态跳转；
• 引进router，然后使用router.push(‘/url’)来跳转，使用了diff算法，实现了按需加载，减少了dom的消耗。
• 其实使用router跳转和使用history.pushState()没什么差别的，因为vue-router就是用了history.pushState()，尤其是在history模式下。

Vue2中注册在router-link上事件无效解决方法

使用@click.native。原因：router-link会阻止click事件，.native指直接监听一个原生事件。

params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name。

url地址显示： query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意点： query刷新不会丢失query里面的数据
params刷新 会 丢失 params里面的数据。

vue-router实现路由懒加载（ 动态加载路由 ）

1. vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
2. 路由懒加载(使用import)。
3. webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

slot 插槽(就是组件的占位符)：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）

• 单个插槽 -> 匿名插槽
• 具名插槽:
  需要多个插槽时，可以利用 元素的一个特殊的特性：name来定义具名插槽
• 作用域插槽——带数据的插槽
  单个插槽和具名插槽中插槽上不绑定数据，所以父组件提供的模板既要包括样式又要包括数据，而作用域插槽是子组件提供数据，父组件只需要提供一套样式

vue动态绑定class的最常用几种方式：

第一种：（最简单的绑定）

1.绑定单个class

html部分：

 <div :class="{'active':isActive}"></div>

js部分：判断是否绑定一个active

data() {
    return {
      isActive: true
    };
  }

结果渲染为：

<div class="active"></div>

2.若要绑定多个class，需要逗号隔开就行：（这里的activeTwo加不加引号都可以，也一样都能渲染，如下）

 <div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

js部分：判断是否绑定对应class

  data() {
    return {
      isActive: true,
      hasError: true
    };
  }

结果渲染为：

<div class="activeOne activeTwo activeThree"></div>

第二种：（绑定的数据对象）

<div :class="classObject"></div>

data: {
  classObject: {
    active: true,
  }
}

第三种：（绑定一个返回对象的计算属性）

<div :class="classObject"></div>

export default {
  data() {
    return {
    isActive: true,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive,
    }
  }
}

结果渲染为：

<div class="active"></div>

第四种：（单纯数组方法）

<div :class="[activeClass, errorClass]"></div>

 data() {
    return {
      activeClass: "active",
      errorClass: "disActive"
    };
  },

结果渲染为：

<div class="active disActive"></div>

第五种：（数组与三元运算符结合判断选择需要的class）

<div :class="[isActive?'active':'disActive']"></div>

 data() {
    return {
      isActive: false,
    };
  },

结果渲染为：

<div class="disActive"></div>