---
# System prepended metadata

title: vue學習#3 關注點分離
tags: [Vue, Vue 直播班 - 2022 春季班]

---

# vue學習#3 關注點分離
###### tags: `Vue 直播班 - 2022 春季班` `Vue`
## 什麼是關注點分離
將不同的功能分開處理，大多專注在資料處理上，渲染的事情就交由Vue去渲染，畫面與資料的工作分開來做
在處理資料的時候，不會把DOM元素放到任何METHOD或DATA處理，關注點分離就是避免寫再一起搞混
#### JS傳統開發方式 圖1
用下圖來解釋:
原本利用JS抓取文字並將文字渲染到網頁上時，渲染會使用到innerHTML等方式寫到HTML上，所以在JS上面會寫到HTML的語法

會造成麻煩的問題
1. 抓取文字也是寫在JS上，也是固定的要改變也是要在JS檔案上面修改，管理不易
#### 關注點分離 圖2
透過關注點分離的概念開發時，資料與畫面不像用 JS 寫的時候都參雜在一起，反而是畫面跟資料分開處理，在抓取文字方面就只要關注在資料庫上的資料分析，不用在想渲染的事情，在一個地方做一件事情，渲染的事情就交給框架幫忙渲染
![](https://i.imgur.com/2NKqAvS.png)
![](https://i.imgur.com/PDZ4aG3.png)
