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 代码分包