Vue3+.net6.0 一 3和2的一些区别，初始化一个最简单的Vue3-526互联

Vue3的数据双向绑定原理与Vue2不同

　在之前的Vue2的学习中，知道了vue2的双向绑定是通过Object.defineProperty将我们new出来的vue对象中的Property转换成Setter/Getter，每个组件有一个watcher来监听这些Property。

　在Vue3中，使用的是ES6的ProxyAPI监听属性，可以监听数组，对象类型的数据，不用像Vue2那样需要曲线救国。

动手引入Vue3.js

我用的是vs2022，新建了.net6.0 的 MVC 网站项目。

直接在index页面上引入

<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>

当然也可以下载后放到自己的项目目录下引入，我这里就直接用了。

创建Vue对象，最简单的一个示例

语法相比Vue2还是有区别的，不过都有官方文档，我这里示例内容用的是官方的示例，但是因为我是直接引入的js，所以还是略有不同。

示例功能就是点击按钮，让count++，并且在h1标签中显示出来。

html部分，定义要Vue要控制的div。

<div id="appDiv" class="text-center">
    <h1 class="display-4">{{count}}</h1>
    <input type="button" v-on:click="count++" value="点击++"/>
</div>

js部分，注意type一定是module，否则会报错。

<script type="module">
    const { createApp} = Vue; //每个Vue应用都是通过 createApp函数创建一个新的应用实例
　　 const app = createApp({
        data() {
            return {
                count: 0
            }
        }
    });
　　//应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串
    app.mount('#appDiv');
</script>