vue入门到精通

2021年12月13日 15:48 · 阅读 237

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()
    }
}
复制代码