# 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)