vue前端面试题汇总（常问-进阶篇）

vue中computed和watch的区别

1.computed的用法
是一个计算属性,类似于过滤器,对绑定到view的数据进行处理。computed上面的属性不可在vue data中声明，不能做异步处理

 data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }

fullName不可在data里面定义,因为对应的computed作为计算属性定义fullName并返回对应的结果给这个变量,变量不可被重复定义和赋值。computed的属性还有get，和set方法。

data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
computed: {
	fullName：{
		get(){
		   return this.firstName + ' ' + this.lastName
		},
		set(val){
		   //val就是fullName的最新属性值
		}
	 }
  }

2.watch的用法
watch 是对data上的数据做监听，数据发生了变化做一系列的操作。

data: {
    firstName: 'Foo',
    lastName: 'Bar',
    obj: {
    	a:1
    }
  },
watch: {
	// 简单属性的监听
	firstName (newVal, oldVlue) {
		// newVal 新值， oldVlue旧值
	}
	// 对象某个属性的监听
	obj.a (newVal, oldVlue) {}
	
	// 对象的监听，对象引用发生变化才会触发
	obj (newVal, oldVlue) {}
	// 对象所有属性进行监听
	obj : {
        handler(oldVal,newVal){
          
        },
        deep:true
      }
  }

vue中keep-alive的使用和新特性

1.props
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>
<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>
<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

2、结合router，缓存部分页面

使用$route.meta的keepAlive属性：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

//…router.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/World',
      name: 'World',
      component:World,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

它是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

vue路由的实现原理

1.hash模式

http://www.xxx.com/#/home

这种 #。后面 hash 值的变化，并不会向浏览器发送请求，页面因此也不会刷新，hash值的改变会触发浏览器的hashchange事件，vue就是通过监听这个hashchange事件，进行dom处理和页面更新操作

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('hashchange', matchAndUpdate)

2.history 模式
14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时触发 popstate 事件。通用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('popstate', matchAndUpdate)

先写这么多。下篇研究下vue双向绑定原理，和vue3.0的新实现