重读Vue文档

Posted 2023-02-27 前端向朔

基础教程

1. 全局只有一个的 new Vue() 里面的 data 可以采用属性的写法，但是在其他组件里面，这里就不能直接这样写了，需要写成函数，并且把数据 return 出来，这样是因为定义的某个组件有可能会多次创建，如果还是采用属性的写法，会造成多个组件之间，数据是同一个引用，造成混乱和错误。

var app = new Vue(
  el: '#app',
  data: 
    message: 'Hello Vue!'
  
)

2. 在 Vue 里，一个组件本质上是一个拥有相同的预定义选项的一个 Vue 实例（根实例特有的选项除外）

// 定义名为 todo-item 的新组件
Vue.component('todo-item', 
  template: '<li>这是个待办项</li>'
)

var app = new Vue(...)

3. Vue 兼容 IE9 ，参考 Web Components 规范进行设计
4. Object.freeze() 这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
5. v-for 循环，可以用来遍历对象

<div v-for="(value, name, index) in object">
   index .  name :  value 
</div>

6. Object.keys() 如何遍历？返回属性值，顺序不定，同 for...in...
7. v-if 相同元素还是会被高效复用，如果你希望不复用的话，给DOM加上不同的 key 即可
8. arr.sort() 转化成数字比较，进行升序排列
9. 风格指南：
   • 组件应该是多个单词组成，避免跟现有的及未来的html元素冲突
   • 组件文件名应该始终单词大写开头，要么使用连字符
   • 基础组件的命名最好采用某个特定的字符开头，如 BaseButton.vue
   • 单例文件，只会在一个地方使用的，用 The 开头，如：TheHeading
   • 子组件应该以父组件名的作为前缀，在编辑器中两个文件会出现在同一个位置，同时通过文件名也可以看出关联关系。
   • 组件名应该以高级别的单词开头，可以高效了解组件的用途
   • 在单文件和字符串模板中，组件名采用大写，DOM中采用中划线
   • v-if/v-else 中，如果两个模板截然不同，不需要高效复用相同的结构的话，可以给两个模板添加 key 属性
10. slot 写法有更新，建议写在 template 上（具名插槽）

API文档

待完成