>[success] # 组件分割
在组件分割这里,类似下面淘宝这种列表为例
![](https://img.kancloud.cn/c9/9a/c99a31a18299e83fac4ce2ab735a7763_1367x842.png)
之前开发时候可能就是直接将后台返回的数据进行直接的数据循环,但这其中问题是,有些数据需要特殊处理,由于整个数据都是循环出来的针对单独某一条基本是失去了计算属性带来的便利,即使说代码好看点也是用定义方法
**但如果将代码更加颗粒度拆分将其 item 变为组件可以发现 计算属性功能有可以了**
![](https://img.kancloud.cn/b8/28/b82821d43bb1c54b0e15bfff75b7cea3_1475x873.png)
>[danger] ##### 之前的代码
[参考](https://sfc.vuejs.org/#eNqNUctK5EAU/ZWaYsAZMIkwMIsm3TDfMSUYOxWNdCpFVXWrhAJ1oYjPjYLSiBtFXClu2kbxZ5KoK3/BW5VINy2IgcB9nHtu3XMy/I9zt9eluIF9RRPeCRRtEUaUH8Y9CBB8JkQ9J0pFk+AYUChmKAxUQHCNAMwPx0EvTyevW7vF+mk+3Cx3Hsr9i9f+2svl+tvDbnG5UZ7188fzon9VXDw+b9yXB4fF1jAfrOWD6/L4vrw7gsFqynFGvJIHrJVlcz8zs9mdFwELdZ2oVU71nNa+Z1GTMxbDRdymExDf+zhuFBHme2MC+LItYq6QpKrLLSBOeCoU6kgUiTRBU65nJHCX5NRYNxM00jUAVLUt87dTJpXVDDURYH515O+PXrW72tfC07iicpKAA3nKwJnMQuuGJLiBbMXUYInJCV5UisuG58mobfxckm4qFjyIXNFlKk6oS2XizIt0WVIBxARPj3F4UOxR4QjKQiqo+IpzAvqJ19BqwjScUisEJ1QCgHhN9N8AMmtkg+Bibz8fDOE1xkzIy+2dsm9yaxwU/vydmSFY29eOpm4Onm/vvjU1SxhdseaENAq6HfMKrN8Bbd0hAw==)
* data.js
~~~
const ls = [
{brand:"华为",type:"手机",price:"3600"},
{brand:"小米",type:"手机",price:"3600"},
]
export default ls
~~~
~~~html
<template>
<div>
<div v-for="item in data">
<!-- 这里做了拼接需要,如果你在好点提出一个方法做拼接-->
<span>{{`${item.brand}${item.type}`}}</span>
<span>{{item.price}}</span>
</div>
</div>
</template>
<script setup>
import ls from './data.js'
import {ref} from 'vue'
const data = ref(ls)
</script>
~~~
>[danger] ##### 较好的处理
[案例](https://sfc.vuejs.org/#eNqNU82K1EAQfpWiETYLO8mC4CFmRkQvnvRuC5tJOm6GpNN0d0YlNHgSRNSL4EUET3paXLzIgvgyszM+htWd9EycBdlAQv18qf6q6uuO3BUiXLaMxCTRrBZVqtmMcqqTvFyiAfhYE5aTopFTSkpEQckhT3VKiUfcOy2rXDIOcSpZeh9zAxQhSeSzHh352juL8iQanZ+oTJZCg2K6FQ5Q1qKRGioFhWxqOAgjyyBcqINRdkvDY3zAtjgGdpIVZkD5lH2zhivteoMpICao1KHP9SR7YjNyRPpSkzoVyKLhOMHOQYeEoiQGF7ExPMT6lJxqLVQcRarILKmFChv5NEIrlC3XZc1CpurJXDbPFJNYmJKjUY0Ig0smJ9hSziST/6u5B71S15Y1lBtsZRglttAPAKc8hccW0M1lyvOYksu371Y/L5CNfiEY+uvXb9afrC9kmdnAzVvHx5QYx3b31/f3m/Mf1/rrCeXsuVtOzoq0rSwLpDbe4J5Ie2UOokJHiZTPuk6XumIPeNEYg+uysX2E12joWPwD84q8nho7FEwtWs1yGKvpNl6grZiEbIQdJ3ZVcvbIesEgC89jqxMANyd4OF+wTA+LBz+QGIJDmM4g6IwTpVsffpwTRbD69Xvz4dvq4tWfsy+bs4+X55/XL7/uiGzngmQ87aCv2B8vsT3J4eRG5ziHnt6d0K3TXI1btuZkR8LfZH9JzF8sG4aG)
~~~
<template>
<div>
<div v-for="item in data">
<Children :areaData="item"></Children>
</div>
</div>
</template>
<script setup>
import ls from './data.js'
import Children from './Children.vue'
import {ref} from 'vue'
const data = ref(ls)
</script>
~~~
* 拆分
~~~
<template>
<div>
<span>{{titleInfo}}</span>
<span>{{areaData.price}}</span>
</div>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
areaData: {
type: Object,
default: () => ({})
}
})
// 使用了计算属性
const titleInfo = computed(() => {
return `${props.areaData?.brand}${props.areaData?.type}`
})
</script>
~~~
- 官网给的工具
- 声明vue2 和 vue3
- 指令速览
- Mustache -- 语法
- v-once -- 只渲染一次
- v-text -- 插入文本
- v-html -- 渲染html
- v-pre -- 显示原始的Mustache标签
- v-cloak -- 遮盖
- v-memo(新)-- 缓存指定值
- v-if/v-show -- 条件渲染
- v-for -- 循环
- v-bind -- 知识
- v-bind -- 修饰符
- v-on -- 点击事件
- v-model -- 双向绑定
- 其他基础知识速览
- 快速使用
- 常识知识点
- key -- 作用 (后续要更新)
- computed -- 计算属性
- watch -- 侦听
- 防抖和节流
- vue3 -- 生命周期
- vue-cli 和 vite 项目搭建方法
- vite -- 导入动态图片
- 组件
- 单文件组件 -- SFC
- 组件通信 -- porp
- 组件通信 -- $emit
- 组件通信 -- Provide / Inject
- 组件通信 -- 全局事件总线mitt库
- 插槽 -- slot
- 整体使用案例
- 动态组件 -- is
- keep-alive
- 分包 -- 异步组价
- mixin -- 混入
- v-model-- 组件
- 使用计算属性
- v-model -- 自定义修饰符
- Suspense -- 实验属性
- Teleport -- 指定挂载
- 组件实例 -- $ 属性
- Option API VS Composition API
- Setup -- 组合API 入口
- api -- reactive
- api -- ref
- 使用ref 和 reactive 场景
- api -- toRefs 和 toRef
- api -- readonly
- 判断性 -- API
- 功能性 -- API
- api -- computed
- api -- $ref 使用
- api -- 生命周期
- Provide 和 Inject
- watch
- watchEffect
- watch vs. watchEffect
- 简单使用composition Api
- 响应性语法糖
- css -- 功能
- 修改css -- :deep() 和 var
- Vue3.2 -- 语法
- ts -- vscode 配置
- attrs/emit/props/expose/slots -- 使用
- props -- defineProps
- props -- defineProps Ts
- emit -- defineEmits
- emit -- defineEmits Ts
- $ref -- defineExpose
- slots/attrs -- useSlots() 和 useAttrs()
- 自定义指令
- Vue -- 插件
- Vue2.x 和 Vue3.x 不同点
- $children -- 移除
- v-for 和 ref
- attribute 强制行为
- 按键修饰符
- v-if 和 v-for 优先级
- 组件使用 v-model -- 非兼容
- 组件
- h -- 函数
- jsx -- 编写
- Vue -- Router
- 了解路由和vue搭配
- vueRouter -- 简单实现
- 安装即使用
- 路由懒加载
- router-view
- router-link
- 路由匹配规则
- 404 页面配置
- 路由嵌套
- 路由组件传参
- 路由重定向和别名
- 路由跳转方法
- 命名路由
- 命名视图
- Composition API
- 路由守卫
- 路由元信息
- 路由其他方法 -- 添加/删除/获取
- 服务器配置映射
- 其他
- Vuex -- 状态管理
- Option Api -- VUEX
- composition API -- VUEX
- module -- VUEX
- 刷新后vuex 数据同步
- 小技巧
- Pinia -- 状态管理
- 开始使用
- pinia -- state
- pinia -- getter
- pinia -- action
- pinia -- 插件 ??
- Vue 源码解读
- 开发感悟
- 练手项目