vue会被问道和需要注意的问题

记录贴

1. 组件命名

组件命名最好命名为多个单词,以免和HTML元素相互冲突,所以命名的语义化,还是比较重要的。

2. data属性需是一个函数

data属性为什么必须要命名为函数呢,其实data属性是对象也是可以的,为什么要命名为函数,因为data属性里面的值可能会有很多地方都会使用,那么修改一个就会更改所有。所以说我们想组件实例都管理其自己的数据,每个实例都必须生成一个独立的数据对象,所以说在函数中返回这个对象即可。

3. Prop定义

prop的定义应该尽量详细,至少需要指定类型。
细致的prop定义的好处

  • 它们写明了组件的 API,所以很容易看懂组件的用法;
  • 在开发环境下,如果向一个组件提供格式不正确的 prop,Vue 将会告警,以帮助你捕获潜在的错误来源。

4.v-for设置键值

面试中会有很多人会问到,v-for为什么要绑定key值啊,下面我们来说一说,在组件上面绑定key值的目的是,便于维护内部组件及其子树的状态。甚至在元素上维护可预测的行为。

解释:
data: function () {
  return {
    todos: [
      {
        id: 1,
        text: '学习使用 v-for'
      },
      {
        id: 2,
        text: '学习使用 key'
      }
    ]
  }
}

然后你把它们按照字母顺序排序。在更新 DOM 的时候,Vue 将会优化渲染把可能的 DOM 变动降到最低。即可能删掉第一个待办事项元素,然后把它重新加回到列表的最末尾。

这里的问题在于,不要删除仍然会留在 DOM 中的元素。比如你想使用 给列表加过渡动画,或想在被渲染元素是 时保持聚焦。在这些情况下,为每一个项目添加一个唯一的键值 (比如 :key=“todo.id”) 将会让 Vue 知道如何使行为更容易预测。

5.v-if和v-for不要用在同一个元素上

一般我们在两种常见的情况下会倾向于这样做:

  • 为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
  • 为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul, ol)。
详解:

当 Vue 处理指令时,v-for 比 v-if 具有更高的优先级,所以这个模板:

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

将会经过如下运算:

this.users.map(function (user) {
  if (user.isActive) {
    return user.name
  }
})

6.私有属性名

使用$或者_符号定义私有属性名,可以确保vue在未来版本中更新不会有冲突,

官网推荐:

Vue 使用 _ 前缀来定义其自身的私有属性,所以使用相同的前缀 (比如 _update) 有覆写实例属性的风险。即便你检查确认 Vue 当前版本没有用到这个属性名,也不能保证和将来的版本没有冲突。

对于 $ 前缀来说,其在 Vue 生态系统中的目的是暴露给用户的一个特殊的实例属性,所以把它用于私有属性并不合适。

不过,我们推荐把这两个前缀结合为 $_,作为一个用户定义的私有属性的约定,以确保不会和 Vue 自身相冲突。

以上仅供参考

如果想查看更多的注意事项可去官网查看官网风格指南
地址

以上均参考摘抄至官网内容,可放心食用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值