vue-issues

vue nextTick

nextTick 解决要等 dom 后执行操作 比如对有 if 条件渲染的 dom 节点要进行处理

日期格式化之阿拉伯数字转中文

导入日期函数

import { date } from 'phpjs'

将阿拉伯数字转换为中文 高阶函数,过滤器,数组 星期几的数字作为数组索引取出对应的中文

// 星期{{day | date 'w' | week}}

filters: {
  week: function (value) {
    return ['日', '一', '二', '三', '四', '五', '六'][value]
  }
}

将 vue data 对象转换为普通对象

const newObj = { ...vueObj }

v-for 中过滤、处理数据

svg

javascript - Vue Cli 3 is not allowing me to process SVG's in Webpack - Stack Overflowopen in new window

组件原子拆分、合成

watch bug

  • default 是组件不绑定 prop 的回退
  • 数据有变化,watch 一定会触发
  • 数据 ready 后渲染子组件,子组件中的 watch 不会触发,因为没为变化,如,两个并行请求,第一个请求完成时渲染子组件,当第二个请求更快完成时,会准备好数据,先于子组件渲染
    // watch 元素不一定变化,存在即需要执行
    function ensureWatchVueData(key, callback) {
      if (this[key]) {
        callback()
      } else {
        this.$watch(key, value => {
          if (value) {
            callback()
          }
        })
      }
    }
    

watch object array

前端编译服务崩溃问题

升级 vue-cli 3 后,在修改 JS 文件,尤其是频繁保存时,服务极易崩溃,可以稳定重现 因为我大部分时间在编辑 vue 文件,感觉不明显,x 同事反映比较突出,严重影响开发效率 崩溃原因: sourcemap 生成、 文件 watch 等功能内存占用大,webpack 部分插件内存泄漏、高内存占用,触及 V8 默认回收上限 1400Mb 解决办法是提升上限,避免触及,需要注意如何正确地添加参数

错误方式(x 同事在 package.json 中添加的): $ vue-cli-service serve --max_old_space_size=4096 正确方式:

  1. 参数应该指定给 node:node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve --open

    yarn serve - JavaScript heap out of memory crash · Issue #1453 · vuejs/vue-cliopen in new window

  2. fix: increase Node memory limit to workaround webpack crash, fix #1453 · octref/[email protected]open in new window

    相关 Issue: Process out of memory - Webpack · Issue #1914 · webpack/webpackopen in new window

编译慢问题

feat(compiler): Use a single compiler for multiple plugin instances by jantimon · Pull Request #967 · jantimon/html-webpack-pluginopen in new window

Multiple entry points -> multiple html outputs webpack rebuild very slow · Issue #724 · jantimon/html-webpack-pluginopen in new window

npm install [email protected]
# 或者
cd node_modules
git clone https://github.com/jantimon/html-webpack-plugin.git
git checkout feature/cache-file-timestamps

build performance · webpack/docs Wikiopen in new window

vue-cli-service 如何本地配置某个依赖

neutrinojs/webpack-chain: A chaining API to generate and simplify the modification of Webpack configurations.open in new window webpack 的 stats 配置不能用,选了别的插件 stats config invalid ? · Issue #2652 · vuejs/vue-cliopen in new window

解决 iOS 中 fixed 定位,输入时错位的问题

根据 focus 和 blur 的状态添加移除 fixfixed 类 把 position 改为 absolute 是普遍做法,当试了不行,干脆直接隐藏

.fixfixed .ui-header,
.fixfixed .ui-footer {
  /*position: absolute;*/
  display: none;
}
methods: {
	inputFocus: function () {
		var body = window.document.getElementsByTagName('body')[0]
		body.className = 'fixfixed'
	},
	inputBlur: function () {
		var body = window.document.getElementsByTagName('body')[0]
		body.className = ''
	}
}

v-for 循环绑定不生效

// not work
  .item(v-for="key of answerKeys" :class="[ key === rightAnswer ? 'right' : 'wrong' ]")

// work
  .item(v-for="key of answerKeys" :class="{ 'right': key === rightAnswer, 'wrong': key !== rightAnswer }")

异步引入

  1. script vue 插件
await Vue.loadScript(scripts[0])
const afterScripts = scripts.slice(1)
return Promise.all(afterScripts.map(url => Vue.loadScript(url)))

scripts.forEach(url => Vue.unloadScript(url))
  1. import 加 promise,取出?
  Promise.all([
    import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
    import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
  ]).then(([docsearch]) => {

Vue.js 技术揭秘 | 生命周期open in new window

html 中使用相对路径

html image src require not respecting webpack aliases? · Issue #193 · vuejs/vue-loaderopen in new window

动态图片引入

Using Dynamic Static Image URLS in Vue.js The quick answer, a partially defined path. :src="require(@/assets/cards/${image}.jpg)"Dependency Management | webpackopen in new window

spa scroll

Automatic scroll restoration in Single Page Applications (SPA) — Childhood Cancer Data Labopen in new window

2.6 Vue.observable

Vue Template - CodeSandboxopen in new window

有待改进

  • router children 嵌套,不要全是一级,跳转传参可在 path:id 来配置
  • 测试数据,可写成模块
    /**
     * 创建临时数据
     */
    const setpromise = data => {
      return new Promise((resolve, reject) => {
        resolve(data)
      })
    }
    

scoped + 深度影响子组件样式

/deep/

组件切换数据问题 v-if 和 v-show

如果用v-show的话,mounted只执行一次,如果希望组件显示时执行,简单解决是改用v-if,比较复杂的方法如下: vue.js - Trigger code on component v-show=true - Stack Overflowopen in new window

大小写

html 属性为何用短杠,因大小写不敏感,大写也会转换成小写

Prop — Vue.jsopen in new window

prop 如何接受进行多种类型校验

validator: prop => typeof prop === 'number' || prop === null,

debug 模板

Vue.prototype.$log = console.log

{
  {
    $log(messaage)
  }
}

{
  {
    ;(function() {
      debugger
    })
  }
}

Debugging Templates in Vue.jsopen in new window

mock

  1. vue cli3 在 devServer 中添加 before
  2. 添加自定义响应返回代码
  3. mockjs 增强 mock 能力,可选 Vue CLI 3 + webpack + Mockjs实现本地数据模拟 - 简书open in new windowMock Data | vue-element-adminopen in new windowjavascript - Node.js - SyntaxError: Unexpected token import - Stack Overflowopen in new windowMock 数据open in new window@babel/register · Babelopen in new windowUMI mock 开发中遇到的问题,已经处理的,在这里记录一下。给朋友们一个参考 · Issue #246 · umijs/umiopen in new window30 道 Vue 面试题(涵盖入门到精通,自测 Vue 掌握程度) - 哔哩哔哩open in new window

Vue 3 迁移指南

介绍 | Vue.jsopen in new window

v-model 支持多个

https://v3.cn.vuejs.org/guide/migration/v-model.html#_3-x-%E8%AF%AD%E6%B3%95

其它

slot 分发内容,占位替换

动态组件:is

区分Vuex与props的使用边界 Vuex 业务组件,集中管理 props 公共组件,组件库

路由ID变了,但组件没变? 使用beforeRouteUpdate

在v-if/v-if-else/v-else中使用key 如果本不相同的元素被识别为相同,则会出现意料之外的副作用。

异步组件

import Foo from './Foo.vue' 
// after
const Foo = () => import('./Foo.vue')
Last Updated:
Contributors: cyio