总结了一下vue面试会问到的问题,各位大佬如发现有错误之处,请指出。拜谢!!!
vue是一个js的渐进式框架,简单,易用,灵活
vue的生命周期是vue实例从创建到销毁的一系列过程。每个过程都有相对应的钩子函数,分为 beforeCreate(创建前),created(创建后),beforeMount(加载前),mounted(加载后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁前),destroyed(销毁后)。
当使用keep-alive时,有activated和 deactivated两个钩子函数。当组件用keep-alive包裹时切换文件时不会进行销毁,而是进行缓存并执行deactivated 钩子函数,组件被激活时执行actived 钩子函数。
MVVM是Model-View-ViewModel的简写,model是模型,view是视图,ViewModel是视图模型。模型是后台传递的数据,视图是所看见的界面,视图模型是将模型和视图连接起来的桥梁。它本质上就是MVC的改进版。采用双向数据绑定,View的变动,自动反映在 ViewModel,反之亦然。
MVC全名是Model-View-Controller的简写,M和V和MVVM中的M和V一样的意思也是模型和视图,controller是控制器,业务逻辑。C存在的目的则是确保M和V的同步,一旦M改变,V应该同步更新。
MVC中的Controller演变成了MVVM中ViewModel
在MVC中View是可以直接访问Model的,而在MVVM中View和Model是不能直接交互的,而是通过ViewModel进行连接的
mvvm 通过数据来驱动视图层的显示而不是节点操作
MVC是单向通信,MVVM是双向通信
MVVM的响应式原理
vue核心即采用数据劫持结合发布者-订阅者模式,通过ES5中Object.defineProperty()的特性来劫持各个属性的setter,getter,在数据变动时发消息给订阅者,触发对应watcher的回调,以致于view更新的效果。
MVVM优缺点
优点
低耦合。视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
可重用性。可以把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计
可测试。界面素来是比较难于测试的,测试可以针对ViewModel来写。
缺点
双向绑定让bug难以调试
消耗内存
vue数据双向绑定是通过数据劫持结合订阅者,发布者的方式来实现的,通过Object.defineProperty()来劫持各个属性的setter,getter,当数据变动时发布消息给订阅者,触发相应的监听回调
v-show和v-if都是用来控制隐藏和显示的
v-show和css中的display一样进行显示和隐藏,dom还在,适合不断切换显示隐藏使用
v-if是当满足条件时才会进行显示,每次显示显示都会重新渲染dom,隐藏时销毁dom
不可以,vue的官网有明确的说明:v-for的优先级比v-if高,先循环再做判断会造成性能浪费,使用过程中不要把它们放在同一个元素上。
首先computed和watch都是监听数据变化的属性
$ router是Vue Router的一个实例,包含了所有路由,包括跳转的方法、钩子函数还有一些子对象,比如:$ router.push、$ router.replace、$router.go等。 $router是一个全局API,可以在组件内部和外部使用
$ route是当前活动路由信息对象,包含当前路由的路径、参数、query等信息。$ route可以用来访问当前路由信息,比如:$ route.params、$ route.query等。$ route只能在组件内部使用,因为$ route包含了当前活跃路由的具体信息,只有组件与路由深度绑定时才会有$route属性。
总之,$ router用来控制路由跳转,$route用来访问当前路由信息。
创建新的vue实例
import vue from ‘vue’
const eventBus = new Vue()
export default eventBus
发送事件
import eventBus from './eventBus .js'
eventBus.$emit('name', data)
接收事件
import eventBus from './eventBus .js'
eventBus.$on('name', (data)=>{
console.log(data)
})
$parent 和 $children
父组件获取子组件数据和方法$children
子组件获取父组件数据和方法$parent
refs和$ref
在父级引入子组件并定义refs,然后就可以在父组件$ ref使用 this.$ref.childName.事件名/变量
Provide 和 Inject
Provide 和 Inject可以将父组件传给所有后代组件
父组件通过 provide 提供数据
export detault {
provide:{
mes:'你好'
}
}
子组件通过Inject接收
export detault {
inject:['mes']
}
首先我们要创建一个Vuex store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = { // 在这里定义状态 }
const mutations = { // 修改state中的数据 }
const actions = { // 定义异步操作函数 }
export default new Vuex.Store({
actions,
mutations,
state
})
为保证组件的可重用性和独立性。如果直接使用一个对象作为data,则不同的组件将共享同一个data对象,如果某个组件修改了data,则会影响到其他组件,导致数据混乱。所以data必须是一个函数,每个组件实例都有自己的独立的data数据。这样每次创建组件都会返回一个新的data对象就避免了组件间共享问题。
唯一标识。提高渲染性能,避免出现重复渲染,渲染错误等问题
在Vue.js中,diff算法是虚拟DOM的核心,用于对比新旧DOM树的差异,并进行最小化更改的渲染操作。
beforeEach:全局前置守卫router.beforeEach(to,from,next),用于在路由切换之前进行一些操作,比如身份验证等,可以通过next函数进行路由拦截或跳转。
afterEach:全局后置钩子,在路由切换后进行一些操作,比如页面统计等。
路由组件内守卫
beforeRouteEnter:在路由进入组件之前触发,可以通过next函数获取组件实例,并进行异步操作,比如获取数据等。
beforeRouteUpdate:在当前路由改变,但该组件被复用时触发,比如多个路由共用一个组件时。
beforeRouteLeave:在路由离开组件之前触发。可以用来确认是否要离开当前页面,比如弹窗提示等。
数据和方法定义
Vue2使用Options API,Vue3使用合成型Composition API
// vue2.0
data(){
return {
}
},
methods:{
}
//vue3.0 数据和方法都在setup中
setup(){
// setup 中是不能使用 this 的,因为setup 函数会在 beforeCreate 之前调用,此时组件的 data 和 methods 还没有初始化
//setup 中this 是undefined
return {
}
}
// vue2.0
<template>
<div class="content">
<p>这里是vue2.0</p>
</div>
</template>
// vue3.0
<template>
<div class="content">
<p>这里是vue3.0</p>
</div>
<p>这里也是vue3.0</p>
</template>
// 父传子 props
// vue2.0
export default {
props: {
title: String
}
}
// vue3.0
import {
toRefs } from 'vue'
export default {
setup(props) {
const {
title } = toRefs(props)
console.log(title.value)
}
}
// 子传父 $emit
// vue2.0
export default {
methods:{
saveClick(){
this.$emit('save', {
name:'张三', sex: '男'})
}
}
}
//vue3.0
export default {
setup(props, {
emit }) {
const sonClick = () => {
emit('save', {
name:'张三', sex: '男'})
}
}
}
有什么问题,大家可以提出来哦!我会及时改正的,多多指教。嘻嘻
文章浏览阅读1.5k次。我本设计介绍了一种基于STM32的多功能GSM通讯系统设计方案。系统以STM32单片机为核心,采用SIM900模块GSM通讯,利用μC/OS-II与μC/GUI系统进行多任务与TFT彩屏的控制,并通过STM32的串口控制GSM模块STM900实现通讯。系统通过STM32的SPI接口实现触控从而实现系统的输入、通过STM32的FSMC接口实现TFT显示从而实现系统的输出。通过STM32的串口可有效发送与接收GSM模块的信息。手机SIM900模块GSM通讯系统【资源下载】下载地址如下(870):http_gsm无线通讯代码
文章浏览阅读2.4k次。前言本文首发于我的个人博客:《计算机网络:自顶向下方法》笔记——第一章:计算机网络与因特网 - YouWolf's Blogyouwolf.cn由于不确定知乎对markdown的支持程度,本人精力有限,来不及修改,所以可以前往本人博客获得更好的阅读体验什么是因特网具体构成概述因特网是一个世界范围的计算机网络,即它是一个互联了遍及全世界数十亿计算设备的网络。所有设备被称为主机(host)或端系统 ..._计算机网络自顶向下第七版pdf
文章浏览阅读1.8w次,点赞30次,收藏69次。为什么使用缓存前几天我在文章《我是如何把一个15分钟的程序优化到了10秒的》中,提到了一些在代码层面优化性能的方法。其中第一个就是使用缓存。使用缓存是一个很“高性价比”的性能优化方式,尤其是对于有大量重复查询的程序来说。通常来说,在WEB后端应用程序来说,耗时比较大的往往有两个地方:一个是查数据库,一个是调用其它服务的API(因为其它服务最终也要去做查数据库等耗时操作)。重复查询也有两种。一种是我们在应用程序中代码写得不好,写的for循环,可能每次循环都用重复的参数去查询了。这种情况,比较聪明一_sync=true
文章浏览阅读2.9k次,点赞7次,收藏10次。nestjs解决跨域
文章浏览阅读357次。好文8145字 约15分钟阅读过去两年,数据中台的概念在中国遍地开花,这个源自于阿里巴巴数据实践的名词,借助数字化转型的东风迅速成为了企业CTO谈论的中心,迅速发展成为一个至少千亿级别的赛道。2019年,也被称为数据中台元年。为什么阿里巴巴能成为现在普遍认同的技术领先公司,持续推进数据的大规模运用是其中最重要的因素之一,这套数据方法论最终沉淀下来成为了今天我们所认知的数据中台。数据中台之所以区别于此前的大数据平台和数据湖,来源于其融合了两大属性:技术属性和业务属性。如果说过去所有的I..._横向竞争
文章浏览阅读119次。今年因工作因素,需要重构整体的自动化测试持续集成交付方案,针对缺乏专门的测试开发人员以及自动化测试人员,在技术选型上采用了业界著名的开源工具。今天主要分享下jenkins相关的自动化测试集..._接口自动化和ui自动化都要下什么jenkins插件
文章浏览阅读1.5w次,点赞4次,收藏15次。这里写自定义目录标题欢迎使用Markdown编辑器一、问题背景介绍二、报错问题分析:欢迎使用Markdown编辑器解决 Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.一、问题背景介绍1、在Vue的项目中使用了postcss-pxtorem这个包,同时在项目根目录中,配置了postcss.config.js,如下图所示:module.exports = { plugins: { 'autopr_typeerror: "postcss-pxtorem" is not a function
文章浏览阅读3.1w次,点赞56次,收藏398次。表单标签的介绍_input标签
文章浏览阅读8.2k次,点赞6次,收藏9次。萌新在面对服务端开发使用PHP搭配Apache时会遇见Cannot load php7apache2_4.dll into server 例如01 最最最主要的问题Apache与PHP版本不一致cd 进入Apache的bin目录使用命令httpd -version来查看Apache的版本, 例如我的版本显示的是Win32 此时就要去PHP官网下载对应的32位版..._cannot load php7apache2_4
文章浏览阅读2.5k次。目前,借由大数据时代的高速发展,它的岗位需求开始迅速扩张,从而给想从事大数据行业的人带来了大量的发展机会,同时也为大家提供了大量的职业发展通道。那么,在这个高速运转的时代,面对如此众多的大数据就业岗位的时候,我们应该去选择什么样的职业发展方向并努力的去学习相应技能从而达到企业要求呢?根据我们行业内各大权威的机构预测,在2020年期间,大数据行业在大数据相关岗位需求中不断激增,这其中Java大数据工程师的缺口大约会在14万到19万人之间,对于懂得如何利用大数据做决策的分析师和经理的岗位缺口则将达到150万_云计算工资水平折现图
文章浏览阅读1.4k次。大数据法律监督平台是基于监督数据整合管理平台、监督模型构建平台、内置模型库以及法律监督线索管理平台打造的一套服务于检察机关法律监督工作的专业化系统。_大数据监管算法模型
文章浏览阅读1.2k次,点赞11次,收藏32次。nor flash硬件电路设计_nor flash电路设计