响应式： 数据变化，视图自动更新
接下来使用一个例子来体现一下什么是响应式
案例一：
访问数据，视图自动更新
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--准备容器 -->
<div id="app"></div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>var app=new Vue({el:'#app',data:{str1:'hello',str2:'你好'}});
</script>
</body>
</html>ctrl + shift +j 打开控制台模拟一下响应式变化
访问谁就会产生相应的变化
案例二：
修改数据，视图自动更新
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><!--准备容器 -->
<div id="app">
{{msg}}</div><!-- 引包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><!-- 创建实例 -->
<script>var app=new Vue({el:'#app',data:{msg:'你好'}});
</script>
</body>
</html>修改前
通过控制台改变数据，可以看到视图随着数据的变化而自动更新
