<script>    import { useRouter } from 'vue-router'    exprot default {   setup(){            const router = useRou…

vue <template>  <div class="about">    <h1>This is an about page</h1>    <h2 @click="handleClick">{{name}}</h2> &n…

provide,Inject const app = Vue.createApp({    setup(){      const {provide,ref,readonly} = Vue;      const name = ref("hello");   …

const app = Vue.createApp({    setup(){      const {        ref,        onBeforeMount,       &n…

watch监听器具备一定的惰性 lazy ( 页面第一次加载的时候不会监听 )参数可以拿到原始和当前的值基本数据类型 和 对象的用法略有不同 基本用法 const app = Vue.createApp({    setup(){        const {reactive , watc…

基本用法 const App = Vue.createApp({    setup(){        const {ref,computed} = Vue;        const count = ref(0);     &n…

context对象中有三个参数attrs 用来替代 props:{} 来接受父组件的传值slots 函数时渲染父组件中的槽口内容emit 替代之前的 this.$emit 进行父子组件之间传值 用法如下 /*attrs*/const app = Vue.createApp({    template:` <child ap…

ref ref 处理基础类型的数据原理， 通过proxy 对数据进行封装，当数据变化时，出发模板等内容的更新 const app = Vue.createApp({    template: `      <div>{{name}}</div>    `,…

时机：created 实例被完全初始化之前 执行的 const app = Vue.createApp({    template: `      <div @click="handleClick">{{name}}</div>    `,   …

使用 Vue/Cli 创建项目 npm install @vue/cli -gvue create vue3Demo 使用 Vite 创建项目 npm init vite@latest 项目目录结构 ( Vite ) vue3Demo dist node_modules public src api assets compnents config …