Vue知识点
- Vue搭建脚手架
vue init webpack xxx(文件名)
-
什么是vue的生命周期:
每个vue实例再被创建时都要经过一系列的初始化过程 监听数据 加载数据 编译模板 挂载dom 销毁 -
Vue的生命周期
- beforeCreate:实例初始化 在new一个vue实例后,只有一些默认的生命周期和默认事件,其他东西还没创建,不能在这个阶段使用data和methods方法,因为还没有初始化,
- created:实例初始化完成 data和methods方法已经初始化 最早调用可以在这个阶段
- beforeMount:正在载入 这个阶段的时候内存中的模板已经编译好了,但是没有挂载到页面,此时的页面还是旧的
- mounted:dom数据准备完毕 这个阶段vue初始化已经完成,我们想要操作页面的dom节点最早可在这个阶段
- beforeUpdate:数据更新前 页面中的数据还是旧的,data中的数据是更新后的,页面还没有和最新的数据保持一致
- updated:数据更新完成 页面中的数据和data的数据保持一致 都是最新的
- actived:当组件被激活时(使用内置组件 keep-alive 来缓存实例,而不是频繁创建和销毁(开销大))
- deactive:组件失效时
- beforeDestroy:组件销毁前 这个阶段data、methods、指令等都还是可用状态 还没有被真正的销毁
- destroyed:组件销毁后 这个阶段data、methods、指令等都不可以使用 组件已经被销毁
- errorCaptured:(2.6版本新增)错误监听钩子
-
vue第一次加载页面触发哪些生命周期:
beforeCreate created beforeMount mounted -
Vue v-if 和 v-show的区别:
- 相同点:v-if 和 v-show都可以动态控制dom元素显示隐藏
- 不同点:v-if是将dom添加或者删除,v-show是将dispaly的属性改为none,dom元素还存在HTML结构中
-
vue中Computed 和 Watch的使用和区别:
- Computed:适用于计算已存在的值并返回,只有当被计算的值发生改变时才会触发,具有缓存性
- Watch:监听某一个值,当被监听的值发生变化时,执行对应的操作或回调,刷新页面或重新渲染时只不变也会执行
- 区别:watch更加适用于监听某一个值的变化并做对应的操作,比如请求后台接口等,而computed适用于计算已有的值并返回结果
-
vue中的$router 和 $route的区别:
- $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象
- $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法 返回上一个history也是使用$router.go方法
-
Vue的响应式原理:
当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化当obj的param被赋值的时候,执行set对应的方法;当obj的param被取值的时候,执行get对应的方法。
let obj = {}
Object.defineProperty(obj,"param",{
set :function SelfSetter(newVal) {
console.log("被赋值")
this._param = newVal
},
get :function SelfGetter () {
console.log("取值")
return this._param
}
})
obj.param = 'newparam'; //被赋值
console.log(obj.param); //取值 newparam
-
什么是vuex
全局的状态管理器,比如在state里声明一个变量可以在任何组件获取并且修改,修改可以得到全局的响应。- State:vuex中的变量声明,全局组件的data,用于保存所有组件的公共数据
- Getters:和computed一样,可以理解为计算属性。返回值会根据它的依赖值被缓存起来,只有当依赖值发生改变时才会被重新计算
- Mutations:和methods一样,可以理解为函数方法。mutations对象中保存着更改数据的回调函数, 第一个参数是state, 第二参数是是自定义的参数。
- Actions:actions 类似于 mutations,不同在于:1.actions提交的是mutations而不是直接变更状态 2.actions中可以包含异步操作, mutations中绝对不允许出现异步 3.actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象
-
vue-router 是什么?它有哪些组件
vue的路由 router-link router-view -
active-class 是哪个组件的属性
vue-router 当routerlink标签被点击时将会应用这个样式 -
怎么定义 vue-router 的动态路由? 怎么获取传过来的值
path:/user/:id
$route.params.id
-
vue-router 有哪几种导航钩子
每个守卫方法接收三个参数:
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。(确保要调用 next 方法,否则钩子就不会被 resolved)next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调全局守卫beforeResolve
const router = new VueRouter({ ... }) router.beforeResolve((to,from,next) => { next() })
前置守卫beforeEach
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... next() })
后置守卫afterEach(不需要next())
const router = new VueRouter({ ... }) router.afterEach((to, from) => { // ... })
路由独享的守卫
const router = new VueRouter({ routes: [ { path: '/index', component: index, beforeEnter: (to, from, next) => { // ... next() } } ] })
组件内的守卫
-
beforeRouteEnter 在渲染该组件的对应路由被 confirm 前调用
-
beforeRouteUpdate 在当前路由改变,但是依然渲染该组件是调用
-
beforeRouteLeave 导航离开该组件的对应路由时被调用
<template> ... </template> export default{ data(){ return{ } }, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 this // 因为当守卫执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候, // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } }
beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说,this 已经可用了,所以不支持传递回调,因为没有必要了。
beforeRouteUpdate (to, from, next) { console.log(this) this.name = to.params.name next() }
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
beforeRouteLeave (to, from , next) { const answer = window.confirm('Do you really want to leave? you have unsaved changes!') if (answer) { next() } else { next(false) } }
完整的导航解析流程:
- 1.导航被触发。
- 2.在失活的组件里调用离开守卫。
- 3.调用全局的 beforeEach 守卫。
- 4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 5.在路由配置里调用 beforeEnter。
- 6.解析异步路由组件。
- 7.在被激活的组件里调用 beforeRouteEnter。
- 8.调用全局的 beforeResolve 守卫 (2.5+)。
- 9.导航被确认。
- 10.调用全局的 afterEach 钩子。
- 11.触发 DOM 更新。
- 12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
-
-
$nextTick的使用:
vue响应式的改变一个值以后,此时的dom并不会立即更新,如果需要在数据改变以后立即通过dom做一些操作,可以使用$nextTick获得更新后的dom -
delete和Vue.delete删除数组的区别:
delete删除的元素只是置为空 其他元素键值对保持不变
$delete和splice等一样 直接删除 但也改变了元素的键值对 -
params和query的区别:
params只能用name传值 query可以用name和path传值
params参数不显示在地址栏中 query参数明文发送
params是路由的一部分,必须在理由后面添加参数 query是拼接在url后面的参数,没有也没关系 -
axios的优势:
适用promise的方法
自动转换JSON格式
客户端支持防御跨网站伪造攻击 -
封装 vue 组件的过程:
创建一个组件
import 引用组件 用components注册组件
父组件给子组件传值可用props
子组件给父组件传值可用$emit -
assets和static的区别:
- 相同点:
assets和static两个都是存放静态资源文件。项目中所需要的资源文件图片,字体图标,样式文件等都可以放在这两个文件下 - 不同点:
1.assets中存放的静态资源文件在项目打包时,也就是运行npm run build时会将assets中放置的静态资源文件进行打包上传,所谓打包简单点可以理解为压缩体积,代码格式化。而压缩后的静态资源文件最终也都会放置在static文件中跟着index.html一同上传至服务器
2.static中放置的静态资源文件就不会要走打包压缩格式化等流程,而是直接进入打包好的目录,直接上传至服务器。因为避免了压缩直接进行上传,在打包时会提高一定的效率,但是static中的资源文件由于没有进行压缩等操作,所以文件的体积也就相对于assets中打包后的文件提交较大点。在服务器中就会占据更大的空间 - 使用建议:
将项目中template需要的样式文件js文件等都可以放置在assets中,走打包这一流程。减少体积。而项目中引入的第三方的资源文件如iconfoont.css等文件可以放置在static中,因为这些引入的第三方文件已经经过处理,我们不再需要处理,直接上传
- 相同点:
-
单页面应用和多页面应用区别及优缺点:
- 单页面:
1.浏览器一开始要加载所有必须的 html, js, css
2.用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
3.前后端分离
4.数据的传递简单
5.不利于seo
6.首屏加载时间长
7.页面复杂度提高很多
8.url模式 index/#/one - 多页面:
1.页面跳转时是整页刷新
2.用户体验差,慢,页面切换加载缓慢,流畅度不够
3.数据传递需要依靠url cookie localStorage等
4.url模式 index/one.html
- 单页面:
-
vue组件中的data为什么非得是一个对象:
Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响 -
vue-router响应路由参数的变化
1.watch
2.beforeRouteUpdate -
Vue-cli打包命令是什么?打包后导致路径问题,应该在哪里修改
npm run build
解决:到config文件夹中打开index.js文件 文件里面有两个assetsPublicPath属性,更改第一个,也就是更改build里面的assetsPublicPath属性:'/'改为'./'
PS:其他问题 https://www.cnblogs.com/zly1022/p/10108548.html -
vue的两个核心点:
ViewModel 组件 -
vue常用的修饰符:
- 事件修饰符
.stop 阻止点击冒泡
.prevent 阻止默认事件
.capture 由外到内捕捉事件
.self 只触发自己范围内的事件 不包括子元素
.once 只触发一次事件 - 键盘修饰符
.enter:回车键
.tab:制表键
.delete:含delete和backspace键
.esc:返回键
.space: 空格键
.up:向上键
.down:向下键
.left:向左键
.right:向右键 - 鼠标按钮修饰符
.right
.left
- 事件修饰符
-
vue mock的使用:
https://blog.csdn.net/bocongbo/article/details/81700843 -
什么是mvvm:
model view viewmodel 将数据和视图绑定在一起 当数据发生改变随即视图也跟着改变 -
什么是 SPA 单页面,它的优缺点分别是什么
- 只有一个html文件 通过路由改变的方式实现页面切换
- 优点:
1.用户体验好
2.首次加载不需要加载整个页面
3.对服务器压力小 - 缺点:
1.初次加载耗时比较长
2.不利于SEO
-
Vue 的单向数据流:
vue是单向下行的数据绑定 如:父组件给子组件传值 而子组件不能直接修改父组件的数据 -
vue-router 路由模式有几种?
hash history abstract -
Vue项目的优化:
1.v-if和v-show的区别使用
2.使用v-for遍历必须加key
3.事件的销毁(清除定时器 递归做结束出口)
4.图片懒加载
5.路由懒加载
6.服务端渲染 -
Vue 中的 key 作用:
vue中vnode的唯一标识,用来是diff算法更快 更精准 -
Proxy 与 Object.defineProperty 优劣对比:
Proxy:可以直接监听对象 可以直接监听数组的变化
Object.defineProperty:兼容性教高(IE9) -
keep-alive:
配合路由使用 可以是组件保留状态 避免重复渲染
有两个属性:
include:组件名只要匹配添加的名称表示会被缓存
exclude:组件名匹配添加的名称表示不会被缓存
有两个生命周期:
activated deactivated -
父组件监听到子组件的生命周期:
1.在子组件的生命周期里使用$emit给父组件发送一个事件
2.在父组件的子组件标签上使用@hook:mounted (hook可以监听任何一个生命周期) -
直接给一个数组项赋值,Vue 能检测到变化吗?
不可以 因为 -
vue响应式原理:
vue初始化的时候会遍历对象所有的property并且通过object.defineProptery把他们添加getter和setter方法 而每个vue的组件都有一个watcher函数 当数据发生改变时setter会调用watcher重新计算重新渲染组件 -
手写实现一个双向绑定:
<input type="text" id="ipt" /> <p id="p" /> let oInp = document.getElementById('ipt') let oP = document.getElementById('p') let obj = {} Object.defineProperty(obj,'text',function(){ set(newValue){ oInp.value = newValue oP.innerHTML = newValue } }) oInp.addEventListener('keyup',function(e){ oInp.text = e.target.value })
-
怎么解决vue动态设置img的src不生效的问题
在src里面使用require 因为不这样的话会被默认为静态资源处理