vue高级6个方法 及其他（小记）

本文主要是介绍vue高级6个方法 及其他（小记），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

set 方法

(1)当动态给 data 中对象添加属性，没有响应式原理时，这时会需要$set方法，set可以实现动态给data添加属性，实现响应式效果及使用

(2)解决数据没有被双向绑定我们可以使用 vue.$set 实例方法

原因：vue中并不是什么时候都能实现双向绑定

mixin 方法

 混合 (mixins)混合对象可以包含任何组件选项

含义：

          组件在引用之后相当于父组件里开辟了一块单独的空间

nextTick方法

简单理解：就是js已经执行了，但是dom没有这个盒子，去选择一个id，这时候dom节点没有这个id，这时需要延迟一下。然后才可以获取到。

emit 方法

个人理解：vue里 父组件向子组件传参时 会用一个props函数 ，但是子组件无法改变父组件参数这时就可以用$emit触发父组件定义事件

on 方法

1、VM.$on('事件名',callback) ---callback回调$emit要传送的数据；
2、监听当前实例上自定义事件；

extend 方法

一个扩展实例构造器

使用基础 Vue 构造器，创建一个“子类”

 webpack中plugin与loader区别

loader 它是一个转换器，单纯的文件转换过程 

plugin是一个扩展器，扩展webpack的功能，plugin是作用于webpack本身的

 常用的5个plugin

//导入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//导入css抽出压缩插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//导入css压缩插件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//导入js压缩插件
const TerserWebpackPlugin = require("terser-webpack-plugin");
//导入path
const path = require("path");
//导入拷贝插件
const CopyWebpackPlugin = require("copy-webpack-plugin");
//导入清空插件

常用的5个loader

（1）css-loader 处理css文件                                                                                                       （2）style-loader 把css插入到header
（3）less-loader   处理.less
（4）MiniCssExtractPlugin.loader  压缩抽出css-loader
（5）file-loader处理文件，图片
（6）url-loader  当文件比较小的时候转成base64   (减少-http请求)

不用vue脚手架如何搭建基于webpack的vue项目 

 1.安装 vue 源文件 热更新 编译template模板文件

2.导入vue插件  const VueLoaderPlugin = require('vue-loader/lib/plugin');

3.配置

webpack常见的优化方式有哪些

1.css优化压缩

2.图片优化

3.js优化压缩

4.异步加载

5.预加载

6.按需导入js

7.splitChunks  代码分包

这篇关于vue高级6个方法 及其他（小记）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！