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引入iconfont阿里巴巴矢量图标库官网,自定义图标


下一篇:11