【浅谈】vue的组件化

【浅谈】vue的组件化

【推荐】
如何应用 SOLID 原则整理 React 代码之单一原则
组件代码拆分步骤：

1. 分离接口调用代码
2. 分离接口逻辑处理代码，里面调用对应接口（使过滤代码和调用代码直接关联）

什么是STAR
star（情景situation、任务task、行动action、结果result）：
situation:事情是在什么情况下发生的，也就是需求是什么；
task：明确你的任务是什么，在项目中担任什么角色
action：针对这个情况，你采取了什么行动，你是如何推进整个项目
result：结果怎样，学到了什么
组件化开发的目的
减少代码冗余，便于维护，便于复用
组件化开发的结果
可复用、可组合、高内聚低耦合

组件化参考
组件化开发
组件封装原则
前端组件设计原则（推荐）
组件化开发需要考虑的问题

• 单一职责原则：封装的组件应该只为完成一件业务需求（业务组件）
• 组件需要考虑，state、props、methods
• 扁平化数据，不直接传递对象给子组件，而传递，基本数据类型（这种考量可能是担心子组件直接父组件的值修改，也可能是父组件对象的某个无关属性的变化也会直接被子组件监听到导致的性能问题，如果是这样的话，对于不变的数据倒是可以直接传递对象给子组件，但这样的话也需要考虑子组件复用的情况，直接传对象，子组件需要哪些属性是不明确的，在后续复用的时候可能会漏传）
• state的改变应该基于交互或者api的响应，而不是因为别的api变化
• 松耦合，组件的核心是可复用，完整的功能
• 提炼精华，组件只需要包含必要的js，其他的例如api调用，数据格式化，后跨组件复用的数据都移交给外部js处理
• 不要依赖vuex，vuex是用于管理状态的，在组件化中，不要依赖vuex进行传参，这样想来确实是比较合适的，既然渲染组件化，如果用vuex来传参，可能导致组件的使用偏向于复杂，而且在要实现响应式需要借助computed和watch，导致复用时监听过于频繁的问题，而且，组件中用到哪些vuex状态也是不透明的，没有用props那么直观

组件传值

• .sync语法糖：
  父组件通过props向子组件传递数据时是单向的，子组件不能直接修改属性值。sync语法糖是v-bind和update组合，通过v-bind绑定属性值，通过update事件通知父组件（v-bind:name1.sync= ‘name2’ =>v-bind:name1=’ name2’ @update:name1=“val=>name2=val”）
  子组件通过$emit(‘update:name1’,val)更新，通过props:[‘name1’]接收

• v-model语法糖：
  v-bind和input的组合，通过v-bind绑定属性值，通过input事件通知父组件：v-bind:value=“value2” @input=“value2=argument[0]”=>v-model="value2
  子组件通过$emit(‘input’,val)，通过props:[‘value’]接收，
  也可以自定义v-model的prop和event

  model: {
     
    prop: 'test2',
    event: 'change'
  },
  props: ['test2'],

等同于v-bind:test2=“test2” @change=“test2=argument[0]”
参考：Vue组件世界

• provide/inject：非响应式，可以用于传递函数，父组件定义方法，然后传递给子孙组件，子孙组件执行父组件中的方法

子组件接收父组件属性的原理？
父组件中使用子组件的方式是通过标签使用，通过属性传值，
那么什么是HTML呢？
HTML理解
HTML的理解2
html是超文本标记语言，计算机可以识别html中的字符串然后转换成网页
HTML标签和元素的区别
标签是由尖括号包围起来的关键词，成对出现，如：
元素：如html元素，尖括号里面的部分叫元素的内容，html元素有属性概念，元素在标签中定义
什么是DOM
DOM是HTML基于对象的表现形式，dom不同于html，通过dom可以访问，修改html