Vue中需要注意的地方

1. ESlint

  • ESlint 是一个代码规范检查工具，它定义了很多特定的规则, 一旦你的代码违背了某一规则, ESlint 会作出非常有用的提示。
  • ESlint提供以下支持：ES, JSX, style检查以及自定义错误和提示。

2. 组件化编码的基本流程

  1. 拆分组件
  2. 实现静态组件
  3. 实现动态组件
    初始化显示
    动态交互（写交互要先给目标元素绑定监听）

动态组件的实现还主要包括实现初始化显示和动态交互功能。
此外还要对在编码时所使用的数据确定数据名称，定义数据的类型。同时还要分析对于这个数据是某一个组件需要还是某些组件需要。

3. 模板字符串(ES6)

window.confirm(`确定删除${comment.name}的评论吗?`)

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

4. 鼠标滑入/滑出监听

mouseenter/mouseleave
对当前元素及其内部元素都有效。
mouseover/mouseout
只对当前元素有效，对内部元素无效。

5. 数据存储(localStorage)

  • localStorage 和 sessionStorage 属性允许在浏览器中存储 key-value 对的数据。
  • localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
  • localStorage 属性是只读的。
  • 在使用数据存储时要先分析数据的存储和读取时间。
  • 使用深度监视能够监视内部的任何改变。
watch: {
  todos: {
    deep: true,  // 深度监视
    handler: function (value) {
      // 将todos最新的值的JSON数据格式保存到localStorage中
      window.localStorage.setItem('todos_key', JSON.stringify(value))
    }
  }
}

当要保存的数据为数组或对象类型时，要先用JSON.stringify()转换为JSON格式，在window.localStorage.getItem时再使用JSON.parse()转换回源格式。

6. 其他

  1. 写函数方法时要分析确定到底要不要传形参，如果要传的话传的是什么，参数是一个还是多个，名字叫什么。
  2. 当既要读这个数据又要监视数据的变化就要想到使用计算属性。
  3. 深度监视：能够监视内部任何的改变