这就得从使用Vue与原生JS的对比来说了
以下是一个简单案例:
js代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#hh {
font-size: 60px;
}
</style>
</head>
<body>
<h1 id="hh">JS版本</h1>
<div id="app">
<h2>Hello, Vue3</h2>
<button onclick="demo.changeTest()">点我更改内容</button>
</div>
</body>
<script>
const app = document.getElementById('app');
const demo = {
changeTest() {
const h2 = app.querySelector('h2');
h2.innerHTML = '<h1>Hi, React18</h1>';
}
}
</script>
</html>
Vue代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<style>
#hh {
font-size: 60px;
}
</style>
</head>
<body>
<h1 id="hh">Vue版本</h1>
<div id="app">
<h2 v-html="msg"></h2>
<button @click="changeTest">{{btn}}</button>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: 'Hello, Vue3',
btn: '点我更改内容',
},
methods: {
changeTest() {
this.msg = '<h1>Hi, React18</h1>'
}
},
})
</script>
</html>
它们的效果完全一样。可以看到,该案例的意思是获取页面上h2标签的元素,并修改其内容,再渲染为h1标签,原生js是通过不断的getElementById或者querySelector等函数操作去操作DOM,如果代码量大了会很繁琐,而Vue通过数据绑定实现数据渲染,从而开发者无需自己操作DOM,全权交给Vue来管理,就会省去很多时间,提高开发效率。