vue代码开发技巧或者规范

最新推荐文章于 2025-04-17 08:38:07 发布

jiuwanli666

最新推荐文章于 2025-04-17 08:38:07 发布

阅读量277

点赞数

分类专栏： Vue 文章标签： vue vue技巧 v-for v-if watch

本文链接：https://blog.youkuaiyun.com/jiuwanli666/article/details/104820441

版权

Vue 专栏收录该内容

27 篇文章

订阅专栏

1、v-for中使用:key

在操作列表渲染时，把：key属性与v-for一起使用，可以使vue对组件状态进行跟踪。
使用唯一的识别符，diff算法能更高效的更新DOM。

2、v-for和v-if尽量避免在同一元素上使用

在列表渲染时常遇到元素的筛选，这时就会自然而然的把v-for和v-if结合在一起
进行使用。但是，在使用时会发现有时只需要一个或者几个元素的值，而要去
遍历整个列表。这样就做了好多无用功。
遇到这种情况不妨使用computed，直接将满足条件的元素筛选出来。

<div v-for='item in newData'>筛选后的:{{item.name}}</div>

data () {
    return {
      oldData: [
        {
          id: 1,
          name: 111
        },
        {
          id: 2,
          name: 222
        },
        {
          id: 3,
          name: 333
        }
      ]
   }
}

computed: {
    // newData: function () {
    // return this.oldData.filter(function (product) {
    newData: (vm) => {
      return vm.oldData.filter(function (product) {
        return product.id > 2
      })
    }
}

3、指令简写

@ 是 v-on的简写
: 是 v-bind 的简写
# 是 v-slot 的简写

4、组件模板props、事件问题

模板使用使用短横线‘-’命名props、添加事件监听。在模板中，则要使用驼峰来生命。
为什么要这样生命呢？
以为在js中使用驼峰声明是标准，在HTML中使用短横线生命是标准。如果使用模板时，使用了
驼峰格式，那么在vue中则会把驼峰转换为短横线式的命名方式。

// props
props: {
	detailData: {
		type: Array 
	}
}
// 模板使用
<sub-tem @btn-click='clickFn' detail-data='data'></sub-tem>

5、正确定义props、校验props

props是用来接收来自父组件的数据。是单向数据流中重要的一环。
定义时props的类型是必须的生命的。可以是String，Array、Objec也可以是Datet等原生构造函数的一种。
使用validator函数对定义的props进行校验。

props: {
	detailData: {
      type: Array,
      default: [1, 2],
      required: true,
      validator: function (value) {
      		// 若校验失败，控制台会有警告（开发环境）
      		return value.length > 2
      }
    }
}