vue实践中的常见知识漏洞001

异步函数中使用this无法指向vue实例对象

问题描述 ： 在定时器或者其他异步函数中使用传统的func导致this指向不到vue实例，主要原因是因为this指向的问题，详细的可以参考我的《神奇的this》这篇文章。

解决方案 ：用箭头函数或者指定变量赋值为this（其他一些不能用箭头函数的地方自己也要注意）

定时器在组件销毁后还在执行

问题描述 ：一些耗费性能的计时器或者动画在组件销毁之后还是执行的，导致性能变低。

解决方案 ：在销毁组件的生命周期中销毁定时器或者一些动画的js

解决方案 ：需要严格对应组件的大小写，避免低级错误

动态添加的dom没有样式

问题描述：作为常识我们知道style中的样式都会追加scoped，这样针对模板dom中的样式就可以生效，但其生效后的最终样式并不是我们写的样式名，而是编码后的，所以我们在js中拼接上的dom结构样式并不会生效。

解决思路： 1 当添加的部分样式不会太多，而且是动态加载的，可以将其设置为非scopred的

2 将添加dom部分用的样式放到非scoped样式标签中

3 将添加的部分，如果有必要，可以另外写一个页面拆分的vue组件

拓展 ： 项目中引入的其他ui框架的样式，如果你想覆盖修改，也是需要不加scoped的，如果你想整个项目覆盖，就可以在src/styles下定义customer-element.scss 这样的来重写覆盖样式。

vue中直接修改数据，页面视图不更新

问题描述 ：在常规理解中，视图与数据是双向绑定的，但是有时候修改data的数组或者对象值，视图不会更新 。

  // 文档中的栗子: filter遍历数组，返回一个新数组，用新数组替换旧数组
    example1.items = example1.items.filter(function (item) {
      return item.message.match(/Foo/)
    })

• codepen地址，可以进行问题重现

需要无脑重复某内容

babel-plugin-transform-runtime使用

• 出现问题：这个插件可以兼容并转化大部分的es6语法，但是部分语法也是不能转化或者存在具体问题的。

1. 异步加载组件时，会产生 polyfill 代码冗余
2. 不支持对全局函数与实例方法的 polyfill。不支持全局函数（如：Promise、Set、Map），Set 跟 Map 这两种数据结构应该大家用的也不多，影响较小。但是 Promise 影响可能就比较大了。不支持实例方法（如：'abc'.include('b')、['1', '2', '3'].find((n) => n 等等），这个限制几乎废掉了大部分字符串和一半左右数组的新特性。 而两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。

• 解决方案：一般情况下 babel-plugin-transform-runtime 能满足大部分的需求，当不满足需求时，推荐使用完整的 babel-polyfill。
  • 首先，从项目中移除 babel-plugin-transform-runtime，卸载该依赖： npm un babel-plugin-transform-runtime -D，
  • 接着修改 babel 配置文件

// src/main.js
import 'babel-polyfill'

// router/index.js 
const _import = require('./_import_' + process.env.NODE_ENV)

//使用时
 {
      path: '/',
      name: 'HelloWorld',
      component: _import('HelloWorld')
    },
    
// router/_import_development.js
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

// router/_import_production.js 如果你加载的vue不是这个路径 请自定义哦
module.exports = file => () => import('@/views/' + file + '.vue')

Vue.component("row",{
  template:'<tr><td>{{content}}</td></tr>',
  data(){
    return {
      content:'this is a row'
    }
  },
})

<div @click="handleClick" ref="hello">hello world
  </div>
   handleClick(){
      console.log(this.$refs.hello)
    }

 <counter ref="one" @change="handleChange"></counter>
  <counter ref="two" @change="handleChange"></counter>
  <span>{{total}}</span>
  Vue.component("counter",{
  template:"<div @click='change'>{{number}}</div>",
  data(){
  return {
   number:0}  
	},
   methods:{
       change(){
  		this.number++;
         this.$emit("change")
		}       
      }
})
//app父组件方法
  handleChange(){
      this.total=this.$refs.one.number+this.$refs.two.number
    },