vue的优点:
轻量级框架 组件化 mvvm数据驱动型 双向数据绑定
对 MVVM 的理解
Model:代表数据模型,数据和业务逻辑都在Model层中定义 View:代表UI视图,负责数据的展示 ViewModel:就是与界面(view)对应的Model model和view没有直接关联,通过ViewModel来进行关联,让model和view有双向数据绑定的联系
vue常用的指令
v-if v-show 显示/隐藏 v-for 循环 v-bind 动态绑定属性 v-on 绑定事件 v-model 双向数据绑定 v-once 只绑定一次
vue常用的修饰符
.stop 等同于JavaScript中的event.stopPropagation(),防止事件冒泡 .prevent 同于JavaScript中的event.preventDefault(),防止执行预设的行为 .once 只会触发一次。 .number 获取input里面的值转换为number .enter 按下回车键触发
computed和watch的不用运用场景
字面意思computed是数据改变计算时使用的,比如商品结算 watch是数据改变触发逻辑,比如搜素功能
v-show和v-if的区别
v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次 v-if是动态的向DOM树内添加或者删除DOM元素,若初始值为false,就不会编译了 而且v-if不停的销毁和创建比较消耗性能。 总结:如果要频繁切换某节点,使用v-show。反之则用v-if。
为何在v-for使用key
必须用 key , 且不能是 index 和 random 通过key来判断是否是同一个节点 减少渲染次数,提升性能
vue的生命周期
beforeCreate 实例创建前 created 实例创建后 beforeMount 实例挂载前 mounted 实例挂载后 beforeUpdate 更新前 updated 更新后 beforeDestroy 销毁前 destroyed 销毁后
Vue 组件如何通信
父组件向子组件通信通过 porps 子组件向父组件通信通过 this.$emit 非父子组件通讯通过 vuex
描述组件渲染和更新的过程
初次渲染过程
解析模板为 render 函数 (或在开发环境已完成,vue-loader) 触发响应式,监听 data 属性 getter、 setter 执行 render 函数,生成 vnode ,patch(elem,vnode)
更新过程
修改 data,触发 setter(此前在 getter 中已被监听) 重新执行 render 函数,生成 newVnode patch(vnode,newVnode)
双向数据绑定 v-model 的实现原理
input 元素的 value = this.name 绑定 input 事件 this.name = $event.target.value
Vue中双向数据绑定是如何实现的
通过Object.defineProperty数据劫持,然后通过里面的getter和setter来实现双向数据绑定。
为何组件 data 必须是一个函数
这不是vue相关的问题,而是js方面的问题。vue 文件编译之后实际上是 class,是一个类。而对组件使用的时候,相当于对组件进行了实例化。如果 data 不是一个函数的话,那每一个组件实例就共享了,就会造成数据污染问题。而函数的话,就会形成闭包,保护变量,不会造成影响。
ajax 请求应该放在哪个生命周期
放在mounted里 JS 是单线程的,ajax 异步获取数据
Vuex 中 action 和 mutation 的区别
action中处理异步,mutation是同步 mutation 每次就做一个操作 action 可以执行 mutation
vue-router 的导航钩子
全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。 组件内的钩子 单独路由独享组件
vuex的属性
state 存放vuex数据 mutation 同步的方法 action 像一个装饰器,包裹mutations,使之可以异步 getters 计算属性 modeles 模块化
vue 常见性能优化方式
合理的使用v-if和v-show 合理是同computed 使用v-for时加key,避免和v-if一起使用 合理使用异步组件 data 层级不要太深 使用 vue-loader 在开发环境做模板编译(预编译)
开启 gzip 压缩
安装 compression-webpack-plugin
cnpm i compression-webpack-plugin -D
在 vue.congig.js中引入并修改 webpack配置:
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
}
在服务器我们也要做相应的配置,如果发送请求的浏览器支持 gzip,就发送给它 gzip格式的文件,我的服务器是用 express框架搭建的 只要安装一下 compression就能使用
//注意,要放在所有其他中间件注册之前
const compression = require('compression')
app.use(compression())
Webpack 对图片进行压缩
安装 image-webpack-loader
npm install image-webpack-loader --save-dev
在 webpack.base.conf.js 中进行配置
// vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true
})
.end()
}
}