Vue3

好记性不如烂笔头 Basic 通过 createApp 创建应用实例 在 vue2.x 中，使用的是new Vue()，返回的是根组件实例，而createApp返回的是应用实例，想要得到根组件实例，还需要使用mount方法，个人认为这个改动是在语法层面上区分创建组件和创建应用 ES6 Proxy vue2.x 使用 Object.defineProperty来实现数据相应，vue3 中使用 new Proxy()为数据架设一层代理，来实现数据响应 计算属性 computed 计算属性会缓存结果，只要依赖值不变，多次访问该计算属性也不会执行代码，而是直接返回缓存结果，减小性能开销 计算属性拥有getter、setter 侦听器 watch watch 与 computed 几乎相同，唯一不同的是，watch 允许在其中执行异步操作 class 与 style 的绑定 class <div :class="{active: isActive}"></div> <div :class="classes"></div> data(){ return { classes: { avtive: true, container: true } } } <div :class="[activeClass, containerClass]"></div> data(){ return { activeClass: 'active', containerClass: 'container' } } 也可以直接在v-bind:class中使用三运运算符来切换 class 在自定义组件上使用 class 若组件内只有一个根元素，那么这些 class 会自动合并在根元素上 若有多个根元素，需要定义哪些根元素接收 class，使用$attrs <div id="app"> <my-component class="baz"></my-component> </div> const app = Vue.createApp({}) app.component('my-component', { template: ` <p :class="$attrs.class">Hi!</p> <span>This is a child component</span> ` }) 继承的 Attribute 可以使用$arrts来定义 Attribute 具体出现在哪个元素上 ...