今天就寫一個極簡單的小案例，對比原生JS和Vue兩種不同實現方式，讓大家來感受一下Vue給開發帶來的便捷。
有些代碼可能現在的你還看不懂，沒關係，後面都會講到。本篇的目的就是感受
先看效果圖：
很簡單，一個頭像圖片，一個姓名，一個年齡，這三個字段是模擬網絡請求得到的數據。
原生JS實現
先看看使用原生JS實現方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js實現</title>
<style>
body{
font-size: 20px;
}
.container {
background-color: white;
text-align: center;
}
.avatar {
width: 300px;
height: 300px;
border-radius: 50%;
margin: 30px 0;
}
.item {
padding: 20px;
font-size: 40px;
color: #666666;
}
.label {
font-size: 50px;
color: #333333;
}
</style>
</head>
<body>
<div class="container">
<img src="" class="avatar" id="avatar">
<div class="item">
<span class="label">姓名：</span>
<span id="name"></span>
</div>
<div class="item">
<span class="label">年齡：</span>
<span id="age"></span>
</div>
</div>
</body>
<script>
getData();
function getData() {
//模擬網絡請求回去數據
setTimeout(function () {
const info = {
name: 'ayy',
age: 18,
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577680045304&di=88435eeaa6bf261a5ba16c411f7a0a75&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F03%2F1533152912-BmPIzdDxuT.jpg'
};
document.getElementById('avatar').src = info.url;
document.getElementById('name').textContent = info.name;
document.getElementById('age').textContent = info.age;
}, 1000);
}
</script>
</html>
樣式和標籤可以忽略不看，主要看js這裏：
需要手動操作Dom，給每個元素賦值。更有甚者，我們應該見過這樣的代碼：
可讀性暫且不說，這種代碼特別容易出錯。
Vue實現
看下Vue的實現方式：
<div class="container">
<img :src="url" class="avatar" id="avatar">
<div class="item">
<span class="label">姓名：</span>
<span id="name">{{name}}</span>
</div>
<div class="item">
<span class="label">年齡：</span>
<span id="age">{{age}}</span>
</div>
</div>
<script>
var vm = new Vue({
data:{
name:'',
age:0,
url:''
},
}).$mount('.container');
function getData() {
//模擬網絡請求回去數據
setTimeout(function () {
const info = {
name: 'ayy',
age: 18,
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577680045304&di=88435eeaa6bf261a5ba16c411f7a0a75&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20180802%2F03%2F1533152912-BmPIzdDxuT.jpg'
};
vm.name = info.name;
vm.age = info.age;
vm.url = info.url;
}, 1000);
}
getData();
</script>
沒有一行操作Dom的代碼，只需要改變data數據，視圖會同步變化。代碼是不是清爽多了。而且可讀性提高，易於維護。
