Vue学习开发总结

总结在近段时间使用Vue开发时遇到的问题及知识点。

• Vue.config.silent

日志警告，在开发环境默认为true，生成生产环境默认为false

• v-pre

可以跳跃编译，加快编译速度

• v-cloak

用来保持在元素上直到关联实例结束时进行编译。可以 隐藏未编译的Mustache标签，解决加载时页面闪烁问题。

[v-cloak] {
  display:none;
}

• v-once

只会渲染一次，可以优化提高性能

• v-for 的优先级比 v-if高
• 动态数组：

修改数组长度

arr.splice(newLen)

改变元素值：

Vue.set(arr, index, newValue);
arr.splice(index, 1, newValue);

注意：全部数组赋值时，Vue会自动优化判断修改的值进行部分渲染。

• 修改对象：

Vue.set(object, key, value);

// 多个
object = Object.assign({}, object, {
    key1: value1,
    key2: value2
})

• v-model

.lazy：input事件转变为在change事件中同步

.number：转number值

.trim：去除首尾空格

• @click

.self：元素本身触发

.once：只触发一次

• props

父组件向子组件传值，默认单向。如值为对象或者数组，因为直接引用，修改子组件的值会对父组件修改。

props:{
  A :{
    type: Object, // 类型
    default: () => {}, // 默认值,
    required: true, // 必填
    validator: (value) => {} // 自定义校验函数
  }
}

• 双向绑定

<comp :A.sync="foo"></comp>

• is挂在，动态切换组件
• 组件缓存

<keep-alive></keep-alive>

• 组件命名

PascalCase声明，kebab-case使用