1.Object.freeze()
使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
2.v-once
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
3.computed
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
4.定时器
定义一个定时器
data(){
return{
timer: null
}
}
设置定时器
//选择适合需求的定时器
this.timer = setTimeout( () => {
// 这里添加您的逻辑
}, 1000)
this.timer = setInterval( () => {
// 同上
}, 1000)
清除定时器
//一般页面用unLoad
onUnload() {
if(this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
}
5.filter
举栗：过滤对象数组中属性值为空的对象
let queryList = this.queryList.filter((item) => {
return item.name !== ''
})
6.重新渲染子组件
// 在要操作子组件时进行销毁重建,这样子组件生命周期会全部更新一遍
this.hackReset = false;
this.$nextTick(() => {
this.hackReset = true;
})
再给子组件绑定v-if="hackReset"
7.元素相关
7.1元素的显示与隐藏
//1、dom增加属性
<view :class="isShow" >内容内容</view>
//2、data中增加isShow默认值
data() {
return{
isShow: "domhide",
}
}
//3、在style中声明domhide和domshow两个class
.domhide{display: none;}
.domshow{display: block;}
//4、动态修改
this.timer = setInterval(() => {
this.isShow= "domshow";
}, 5000);
7.2动态修改元素的样式
- 第一种是通过v-bind和三元表达式
<view class="tip" :style="{color:item.state === '已确认'?'#52c41a':'#f5653b'}">商家{{item.state}}订单</view>
- 第二种是通过data
<!-- 底部工具栏 -->
<view class="bottom_tools" :style="{bottom: propUpBottomHeight}"></view>
data(){
return {
propUpBottomHeight: ''
}
}
- ref 在uni-app中不太现实....但是也记录一下
<view class="weibo_box" id='index1' ref="mydom">第二个</view>
data(){
return {
vHeight:22
}
}
handleFont(){
const that=this
that.$refs.mydom.$el.style.fontSize=that.vHeight+=1+'px';
}
8.动态引入图片 && require
首先了解静态资源和动态资源的区别：
静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。比如assets目录下面的图片，视频，音频，字体文件，css样式表等。
动态资源就是需要发送请求获取到的资源。比如我们刷淘宝的时候，不同的商品信息是发送的专门的请求获取到的，就可以称之为动态资源。
为什么动态添加的src会被当做的静态的资源？
动态添加的src最终会编译成一个静态的字符串地址。程序运行的时候，会按照这个地址去项目目录中引入资源。而项目目录中引入资源的这种方式，就是将该资源当成了静态资源
// vue文件中动态引入一张图片
<template>
<div class="home">
<!-- 通过v-bind引入资源的方式就称之为动态添加 -->
<img :src="'../assets/logo.png'" alt="logo">
</div>
</template>
//最终编译的结果(浏览器上运行的结果)
//这张图片是无法被正确打开的
<img src="../assets/logo.png" alt="logo">
动态添加src被当做静态资源处理了，而被编译过后的静态路径无法正确的引入资源，所以要加上require
那这里就诞生了一个新的疑问：被编译过后的静态路径为什么无法正确的引入资源？
// vue文件中静态的引入一张图片
<template>
<div class="home">
<!-- 直接引入图片静态地址， 不再使用v-bind -->
<img src="../assets/logo.png" alt="logo">
</div>
</template>
//最终编译的结果
//这张图片是可以被正确打开的
<img src="/img/logo.6c137b82.png" alt="logo">
在默认情况下，src目录下面的所有文件都会被打包，src下面的图片也会被打包在新的文件夹下并生成新的文件名。编译过后的静态地址引入的是打包过后的图片地址，从而可以正确的引用资源。
动态的添加的src编译过后的地址，与图片资源编译过后的资源地址不一致， 导致无法正确的引入资源。
编译过后的src地址：../assets/logo.png
编译过后的图片资源地址：/img/logo.6c137b82.png
无论加不加require，vue文件中引入一张图片都会被编译。 require是一个node方法，用于引入模块，JSON或本地文件
当我们使用require方法引入一张图片的时候，webpack会将这张图片当成一个模块，并根据配置文件中的规则进行打包。我们可以将require当成一个桥梁，使用了require方法引入的资源，该资源就会当成模块并根据配置文件进行打包，并返回最终的打包结果。
module.exports = {
// 使用configureWebpack对象，下面可以直接按照webpack中的写法进行编写
// 编写的内容，最终会被webpack-merge插件合并到webpack.config.js主配置文件中
configureWebpack: {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|webp|avif)(\?.*)?$/,
type: 'asset',
parser: {
dataUrlCondition: {
// 这里我将默认的大小限制改成6k。
// 当图片小于6k时候，使用base64引入图片；大于6k时，打包到dist目录下再进行引入
maxSize: 1024 * 6
}
}
}
]
}
}
}
调用require方法引入一张图片之后发生了什么
1.如果这张图片小于项目中设置的资源限制大小，则会返回图片的base64插入到require方法的调用处
2.如果这张图片大于项目中设置的资源限制大小，则会将这个图片编译成一个新的图片资源。require方法返回新的图片资源路径及文件名
为什么加上require能正确的引入资源
因为通过require方法拿到的文件地址，是资源文件编译过后的文件地址（dist下生成的文件或base64文件），因此可以找对应的文件，从而成功引入资源。
在webpack编译的vue文件的时候，遇见src等属性会默认的使用require引入资源路径
当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
例如，url(./image.png) 会被翻译为 require('./image.png')，而：
<img src="./image.png">
将会被编译到：
h('img', { attrs: { src: require('./image.png') }})
动态引入一张图片的时候，src后面的属性值，实际上是一个变量。webpack会根据v-bind指令去解析src后面的属性值，并不会通过reuqire引入资源路径。这也是为什么需要手动的添加require。
9.获取input输入框的值
- 使用ref
<input type="text" placeholder="手机号码" ref="userphone"/>
this.$refs.userphone.value
- 使用v-model
<input type="text" placeholder="手机号码" v-model="userphone" />
data() {
return {
userphone: ''
}
}
10.使用watch同时监听多个值
1.先在 computed 中，用需要监听的值(start、end)定义一个对象 dateRange
computed: {
dateRange () {
const { start, end } = this;
return { start, end };
}
})
2.然后在 watch 中监听这个对象 dateRange
watch: {
dateRange (val) {
console.log(val);
}
}
11.click相关事件处理
click.native 将组件变回原生dom的一种方式，可以省略子组件传递事件的操作，直接在父组件中使用原生事件
