vue入门到精通

拼搏现实的明天。 2023-02-23 08:03 19阅读 0赞

### 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()
        }
    }