前端八股文——Vue专题

VUE2系列

丢�、对于MVVM的理�?

MVVM是Model-View-ViewModel的缩�?

Model：代表数据模型，也可以在Model中定义数据修改和操作的业务��辑

View：代表UI组件，负责将数据模型转化成UI展现出来

ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作完全是自动的，无需认为干涉，所以开发��只霢�要关注业务��辑，不霢�要手动操作DOM，不霢�要关注数据状态的同步问题，复杂的数据状��维护完全由MVVM来统丢�管理�?

二��Vue的生命周期（Vue2�?

Vue2

beforeCreate（创建前）在数据观测和初始化事件还未弢��?

created（创建后）完成数据观测，属��和方法的运算，初始化事�?

beforeMount（载入前�?

在挂载开始之前被调用，相关的render函数首次被调用，实例已完成以下的配置

用上面编译好的html内容替换el属��指向的DOM对象，完成模板中的html渲染到html页面中，进行ajax交互�?

Mounted（载入后�?

调用时机：实例挂载到DOM之后再调�?

特点：可以访问渲染后的DOM元素

常用场景：DOM操作、第三方库初始化、事件监�?

beforeUpdate（更新前�?

在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状��，不会触发附加的重渲染过程�?

updated（更新后�?

在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM地操作��?

然��在大多数情况下，应该避免在此期间更改状态，因为这可能会导致无限更新循环，该钩子在服务器渲染期间不可调用�?

beforeDestroy（销毁前）��?

在实例销毁之前调用，实例仍然完全可用�?

destroyed（销毁后）在实例锢�毁之后调用��调用后，所有的事件监听器将会被移除，所有的子实例会被销毁��该钩子在服务器渲染期间不被调用�?

使用keep-alive，会涉及activated和deactivated钩子�?

三��Vue实现数据双向绑定的原理：

Object.defineProperty()

Vue2实现数据双向绑定，采用数据劫持结合发布��?订阅者的模式，��过Object.defineProperty()劫持各个属��的setter,getter,在变动的时��发布消息给订阅者触发回调��?

当把丢�个JS对象传给Vue的时候，Vue就遍历它的属性用Object.defineProperty将它们转为getter/setter。用户看不到他们但是内部已经是用Vue追踪依赖�?

vue的数据双向绑定将MVVM作为数据绑定的入口，整合Observer，Compile和watcher三��?

Observer：监听自己model的数据变�?

Compile:解析编译模板指令

watcher:搭起observer和compile之间通信桥梁，达到数据变�?>视图更新

视图交互变化(input)->数据Model变更双向绑定效果

js实现箢�单的双向绑定�?

<body>
    <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
</div>
</body>
<script type="text/javascript">
    var obj = {}
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return obj
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    document.addEventListener('keyup', function (e) {
        obj.txt = e.target.value
    })
</script>

四��Vue组件间的参数传��?

1.父组件与子组件传�?

父组件传给子组件，子组件通过props方法接受数据

子组件传给父组件�?emit方法传��参�?

<div>
	<ChildComponent
		:title="parentTitle"
		:count="parentCount"
		:isVisible="true"
		@child-event="handleChidEvent"
		/>
<div/>

<script>
import ChildComponent from './ChildComponent.vue'

export default{
	components:{ChildComponent},
	data(){
		retrun {
			parentTitle:'来自父组件的标题',
			
		},
		methods:{
			handleChildEvent(data){
				log('子组件传递的数据:',data)
			}
		}
	}
}

Child

<script>
export default{
//数组接收
props:['title','count','user','isVisible']
//对象接收
props:{
	title:String,
	count:[String,Number],
	user:{
		type:Object,
		required:true
	},
	isVisible:{
		type:Boolean,
		default:false
	}
	.....
	methods:{
		sendToParent(){
			//通过$emit向父组件发��事�?
			this.$emit('child-event',{
				message:'来自子组件的数据',
				timestamp:new Date()
			})
		}
	}
}
}

使用v-model实现双向绑定

子组�?
<input
	:value="value"
	@input="$emit('input',$event.target.value)"
	@blur="$emit('blur')"
	/>
	
<script>
	export default{
		props:['value'],
		//使用model选项自定义v-model的行�?
		model:{
			prop:'value',
			event:'input'
		}
	}

2.非父子组件间的数据传递，兄弟组件传��?

eventBus事件总线，创建一个事件中心，相当于中转站，可以用来传递事件和接收事件，很少用�?

创建Event Bus

3.Vuex、Pinia状��管�?

非父子组件间的数据传递，用Vuex和Pinia的方式来传��?

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

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

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

hash模式就是在浏览器符号#以及后面的字符就是hash，特点是哈希模式下url不美观，SEO不友好不利于页面索引，��且只能够��过url传��字符串参数。不过方便不霢�要做路由器额外配置，url�?符号部分不会发��到服务器，浏览器就只需要请求一个网坢�扢�有的路由逻辑都是在前端完成的�?

history模式：history采用HTML5的新特��，提供两个新方�?

History模式下就是有路径的，对SEO友好，url美观，不过缺点就是要做一下路由器的配置——且在history模式下，前端的URL必须要跟后端的URL是一致的，否则会请求不到资源返回404错误�?

Vue-Router官网里如此描述：不过这种模式要玩好，还需要后台配置支持——所以呢，你要在服务端增加一个覆盖所有情况的候��资源：如果 URL 匹配不到任何静��资源，则应该返回同丢��?index.html 页面，这个页面就是你 app 依赖的页�?

六��Vue与Angular以及React的区别？

1.与AngularJS的区�?

相同点：都支持指令：内置指令和自定义指令，都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器

不同点：AngularJS的学习成本高，增加Dependency Injection特��，而Vue.js本身提供的API都比较简单直观，在��能上，AngularJS依赖对数据做脏检查，扢�以watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，扢�有数据独立触�?

2.与React区别

相同点：React采用特殊JSX语法，Vue.js在组件开发中也推崇编�?vue特殊文件格式，对文件内容都有约定，两者都霢�要编译后使用，中心��想相同：一切都是组件，组件之间可以互相嵌套；提供合理的钩子函数，可以让弢�发��定制化处理霢�求；都不内置AJX,Route到核心包，以插件的方式加载，在组件开发中都支持mixins的特性��?

不同点：React采用的Virtual DOM会对渲染出来的结果做脏检查；Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷操作Virtual DOM

七��VUE路由的钩子函�?

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

beforeEach主要有三个参数，to from next

to:route即将进入的目标路由对�?

from:route当前导航正要离开的路�?

next:function丢�定要调用该方法resolve这个钩子，执行效果依赖next方法的调用参数，可以控制网页的跳�?

八��Vuex是什么？如何使用？哪种功能场景使用？

只用来读取的状��集中放在Store中，改变状��的方式是提交mutations，这是个同步的事物；异步逻辑应该封装在action中��?

在main.js引入store，注入，新建目录store,…export

场景有：单页应用中，组件之间的状态��音乐播放��登录状态��加入购物车

state

Vuex使用单一状��树，即每个应用将仅仅包含一个store实例，但单一状��树和模块化并不冲突，存放的数据状��，不可以直接修改里面的数据�?

mutations

mutations定义的方法动态修改Vuex的store中的状��或数据

getters

类似于vue的计算属性，主要用于过滤数据

action

actions可以理解为��过将mutations里面处理数据的方法变成可以异步处理数据的方法，简单来说就是异步操作数据，view层��过store.dispatch来分发action

const store = new Vuex.Store({ //store实例
      state: {
         count: 0
             },
      mutations: {                
         increment (state) {
          state.count++
         }
          },
      actions: { 
         increment (context) {
          context.commit('increment')
   }
 }
})

modules

项目复杂时，可以让每丢�个模块拥有自己的state mutation action getters，使得结构清晰方便管�?

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
 }
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
 }

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
})

九��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如何自定义一个过滤器�?

html代码�?

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

JS代码�?

var vm =new Vue({
	el:'#app',
	data:{
		msg:''
	},
	filters:{
		capital
	}
})

全局定义过滤�?

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

过滤器接收表达式的��?msg)作为第一个参数，capitalize过滤器将会收到msg的��作为第丢�个参�?

十一、对keep-alive的了�?

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲�?

在vue 2.1.0版本之后，keep-alive加入两个属��：inclue（包含的组件缓存）与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>

十二、一句话就能回答地面试题

1.css只能在当前组件起作用

在style标签中写入scoped即可，例�?style scoped>

前端八股文——Vue专题

前端八股文——Vue专题

VUE2系列

丢�、对于MVVM的理�?

二��Vue的生命周期（Vue2�?

Vue2

相关问题�?

1.仢�么是Vue生命周期�?

2.Vue生命周期的作用是仢�么？

3.Vue的生命周期��共有几个阶段？

4.第一次页面加载会触发哪几个钩子？

5.DOM渲染在哪个周期中就已经完成？

三��Vue实现数据双向绑定的原理：

Object.defineProperty()

四��Vue组件间的参数传��?

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

六��Vue与Angular以及React的区别？

七��VUE路由的钩子函�?

八��Vuex是什么？如何使用？哪种功能场景使用？

state

mutations

getters

action

modules

九��vue-cli新增自定义指�?

1.创建屢�部指�?

2.全局指令�?

3.指令的使�?

十��vue如何自定义一个过滤器�?

十一、对keep-alive的了�?

十二、一句话就能回答地面试题