首页 > 其他分享> 文章详细

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

2021-12-29 21:59:23 阅读：158 来源： 互联网

标签：插件 vue plugin 高级 loader webpack css 小记

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,plugin,高级,loader,webpack,css,小记
来源： https://blog.csdn.net/why15937448697/article/details/122224654

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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