如果有帮助麻烦点个关注(我会互关的-_-)
对MVVM开发模式的理解
它是前端一个架构模式
? Model:代表数据模型,定义数据,
? View:代表UI视图,负责数据的展示
? ViewModel:负责监听Model中数据的改变并且监听视图的更新,处理用户交互操作
Model和View并无直接关系,而是通过ViewModel来进行联系的,Model和ViewModel直接用着双向数据绑定的联系,因此当Model中数据的改变会触发View视图层的更新,无需人为干涉,只要关注业务逻辑,不需要手动操作dom
v-show和v-if区别
? 如果一个元素需要频繁地切换的话,用v-show,因为v-show是给元素添加了css属性来切换隐藏显示的,这样的话从性能角度来讲更高,v-if是当条件满足的情况下,把元素创建出来
vue生命周期函数
实质就是回调函数,vue实例每到一个阶段会
组件创建期间的4个钩子函数
beforeCreate data和methods中的数据还没有被初始化
created 在created中,data和methods都已经初始化好了 如果要调用methods中的方法,或者操作data数据最早 在created中操作
应用场景:发请求获取数据初始化data
beforeMount 模板已经在内存中编辑完成,但是没把模板渲染到页面,但尚未在挂载在页面中去.
mounted 实例创建周期最后一个生命周期函数 当执行完mounted,实例已经完全被创建好
应用场景:需要操作或者dom元素的时候比如echarts的初始化方法
组件的运行
beforeUpdate 这2个事件会根据data数据的改变 触发0到N次
update 把最新的内存dom树更新之后会把最新的内存dom树更新到页面中去
beforeDestroy Vue实例就进入销毁阶段
destroy 组件已经被完全销毁
应用场景:清除定时器,记录用户离开的时间等埋点操作。
注意
回答这个问题不需要把八个钩子死记硬背下来,知道有八个能说出几个常见的钩子的特点以及使用场景就行;
vue-router的两种模式以及实现原理
第一种模式:hash模式url带井号
? 1.onhashchange监听url中hash值的变化,
? 2.根据获取的hash的值,发送请求给后台
? 3.后台返回数据,浏览器就会渲染到路由对应的占位符
第二种模式:h5 之后 history模式,url不带井号
? 1.通过2个API pushState和replaceState可以改变url地址
? 2.以及popState监听url的变化,拿到最新的url地址,
? 3.根据url地址,发请求给后台,拿到我们需要的数据
? 4.后台返回的数据替换路由的占位符
组件中的传值
? A或者B组件,跳转到B组件可以通过 编程式导航this.$router.push({path:'url,query:{属性名:参数}}) 来传递
? 如果是父子组件的话,
? 子组件通过pros属性来接收 父组件通过子组件prop定义的属性和值进行传递,
? 子组件传递父组件 通过自定义事件,this.$emit('事件名','参数') 传递 父组件通过事件接收
? 如果组件与组件中嵌套比较深的话可以通过vuex全局状态管理
父子通信
如果是父子组件的话,
?子组件通过pros属性来接收 父组件通过子组件prop定义的属性和值进行传递,
?子组件传递父组件 通过自定义事件,this.$emit('事件名','参数') 传递 父组件通过事件接收
兄弟组件通信
对于这种情况可以通过查找父组件中的子组件实现,也就是 this.$parent.$children,在 $children 中可以通过组件 name 查询到需要的组件实例,然后进行通信。
跨多层次组件通信
可以通过vuex全局状态管理
vuex是什么?
全局状态(数据)管理,专门用于管理Vue中的数据的,用于组件嵌套比较深层的传值或者到处都要使用到的数据储存
用来操作比较大的项目
new Vuex Store({})
state:{}状态 - 数据
getters{} 用来获取或者过滤数据
mutations{}同步操作state中的值 this.$store.commit('事件',值 )
actions{} 异步操作操作仓库中的数据但也要通过mutations来触发
module 当数据比较复杂时 可以定义模块化方式
vue中data对象数据的添加删除引发视图无法更新的问题
Vue不能检测到对象属性的添加或删除,自己添加的值,不属于响应式的数据,模型改变后不会更新,可以用vue.set来解决
computed 和 watch 区别
computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容。
watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。
所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed,对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。
keep-alive 组件有什么作用
如果你需要在组件切换的时候,保存一些组件的状态防止多次渲染,就可以使用 keep-alive 组件包裹需要保存的组件。
对于 keep-alive 组件来说,它拥有两个独有的生命周期钩子函数,分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 actived 钩子函数。
v-show 与 v-if 区别
v-show 只是在 display: none 和 display: block 之间切换。无论初始条件是什么都会被渲染出来,后面只需要切换 CSS,DOM 还是一直保留着的。所以总的来说 v-show 在初始渲染时有更高的开销,但是切换开销很小,更适合于频繁切换的场景。
v-if 的话就得说到 Vue 底层的编译了。当属性初始为 false 时,组件就不会被渲染,直到条件为 true,并且切换条件时会触发销毁/挂载组件,所以总的来说在切换时开销更高,更适合不经常切换的场景。
并且基于 v-if 的这种惰性渲染机制,可以在必要的时候才去渲染组件,减少整个页面的初始渲染开销。
组件中 data 为什么是一个函数而不是对象
这道题目其实更多考的是 JS 功底。
组件复用时所有组件实例都会共享 data,如果 data 是对象的话,就会造成一个组件修改 data 以后会影响到其他所有组件,所以需要将 data 写成函数,每次用到就调用一次函数获得新的数据。
当我们使用 new Vue() 的方式的时候,无论我们将 data 设置为对象还是函数都是可以的,因为 new Vue() 的方式是生成一个根组件,该组件不会复用,也就不存在共享 data 的情况了。
vue双向绑定数据原理
是通过object.defineproperty()来进行数据的劫持的,里面有2个属性为get,set()方法,可以控制一个对象属性的操作,比如读写等.vue就是通过Object.defineProperty( )对属性设置一个set函数, 当数据改变了就会来触发这个函数,所以我们只要将一些需要更新的方法放在这里面就可以实现data更新view了
设置一个监听器,Oberver,监听所有的属性.
实现一个订阅者Watcher,收到属性的变化通知响应的函数,从而更新视图
实习一个解析器compile 解析初始化对应的订阅器
你会封装vue组件吗
首先,组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块,解决了我们传统项目开发:效率低、难维护、复用性等问题。
然后,使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件。子组件需要数据,可以在props中接受定义。而子组件修改好数据后,想把数据传递给父组件。可以采用emit方法。
回答这种问题举例子最佳,说出封装思路
封装好的组件导出 以及在使用的页面导入就能用比如一个弹窗组件,首先要写好样式以及常规的功能逻辑,比较重要的是,假如用的时候需要动态传入弹窗提示语,那么在设计组件的时候就需要用到传值,假如用户在该组件还需要改变数据,此时可能还需要在改变数据的时候通过$emit触发函数传给父组件,总之具体的设计要根据具体需求。