vue开发拾遗

vue开发拾遗

---

 

• 本内内容：
  
  • 　　记录一些自己遗漏或者平时做的不好的地方

---

 

• 组注册与使用
  • 　　组件注册应设置好组件name属性
  • 　　组件使用应使用，统一kebab-case形式

---

 

• 事件修饰
  • 　　还有其他的一些键盘，系统修饰符请看文档

  • <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a>

    <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 --> <form v-on:submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>

    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div>

 

 

 

---

 

• 插槽
  •       插槽旧语法span solt="", 新语法template v-solt="", 以下为插槽传值（解构语法）

  • <span>
      <slot v-bind:user="user">
        {{ user.lastName }}
      </slot>
    </span>

    <current-user>
      <template v-slot:default="{ user }">
        {{ user.firstName }}
      </template>
    </current-user>

---

•  组件多个v-model（sync修饰符）

  • 　　

    <text-document
      v-bind:title="doc.title"
      v-on:update:title="doc.title = $event"
    ></text-document>

    为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

    <text-document v-bind:title.sync="doc.title"></text-document>

    注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。

---

 

 

• 组件props传值规范（基本）

  • 　　propD: { type: Number, default: 100 },

 

---

 

• vue dom树更新规则
  • 　　将jquery的dom操作痛点变为只关注state的dom更新规则
  • 　　virtual DOM Diff根据算法规则进行同级对比，进行更新删除
  • 　　则同级比较下，设定key则特别重要，可以将同级比较顺序改为移动复用组件
  • 　　比如不要使用数组的index作为key

---

 

• 计算属性和监听器的使用
  • 　　计算属性主要对同步且处理不复杂的情况下使用，会对结果进行缓存保留，当计算条件变化会重新计算
  • 　　监听器针对属性进行数据监听，能完成包括计算属性的全部功能，但是写法较为冗余
  • 　　在同步且不复杂的流程中尽量优先使用计算属性

---

 

• 临时变量

  • 　{{ void ( a = 1 ) }} 或 {{ (a = 1, void 0) }}

  • 　{ components: { TemplateVars: { // 用函数式组件可以避免显式声明 props（Vue 2.3.0+） functional: true, render: (h, {props, scopedSlots}) => h('div', scopedSlots.default(props)), }, }, }

---

 

• 感谢您的阅读，如果有误，或者其他问题，请回复