Vue3的安装脚手架

vue3安装：
  1 @vue/cli
    全局安装@vue/cli
    cnpm i @vue/cli -g
    创建项目
    vue create 项目名

  2 vite
    安装vite
    cnpm init vite@latest

    进入项目
    cd 项目名
    cnpm i
    cnpm run dev

  vue3语法
    数据插值使用{{变量或者常量}}
    格式：
      <script setUp>
        const a=123
      </script>

      {{a}}

    想要修改数据 有两种形式
    需要使用组合式api里边相关的方法
      ref 修改或者获取基本数据类型
      import {ref} from 'vue'

      const a=ref(123)

      const 事件名=()=> {
        a.value=新值
      }

      reactive 修改或者获取引用类型 或者是比较复杂的数据类型
      import {reactive} from 'vue'

      const arr=reactive([1,2,3])

      const 事件名=()=> {
        arr[0]=新值
      }

    vue3引入axios
      局部引入
        安装axios
        cnpm i axios --save-dev
        在使用的组件中 引入axios
        import axios from 'axios'

        axios.get()
        axios.post()

    vue3路由配置
      安装vue-router
      npm install vue-router@4 --save-dev
      需要在根目录创建router文件 里边创建index.js文件
      import {createRouter, createWebHistory} from 'vue-router'
      import 组件 from '路径'

      const routes=[
        {
          path: '',
          name: '',
          component: 组件
        }
      ]

      const router=createRouter({
        history: createWebHistory(),
        routes
      })

      export default router

      在main.js文件中引入router 并且调用router

      import router from '路径'

      createApp("").use(router).mount("")

    vue3获取路由组件传值有两种
      1 以问号形式传值  获取参数使用query
      import {useRoute} from 'vue-router'

      const $route=useRoute()

      console.log($route.query.属性名)

      2 以斜杠形式传值  获取参数使用params
      import {useRoute} from 'vue-router'

      const $route=useRoute()

      console.log($route.params.属性名)

    vue3使用编程式导航
      1 引入useRouter
      import {useRouter} from 'vue-router'

      2 调用router 实现编程式导航
      const $router=useRouter()

      const 方法名=()=> {
        $router.push({
          name: 'name名'
        })

        $router.push({
          path: 'path路径'
        })

        $router.push({
          path: 'path路径',
          params: {
            id：123
          }
        })  // /path/123

        $router.push({
          path: 'path路径',
          query: {
            id: 123
          }
        })  // /path?id=123

      }

    vue3组件传值
      父组件向子组件
        1 在子组件中使用defineProps来定义props
        defineProps({
          自定义数据: {
            type: 数据类型,
            default: 默认值
          }
        })
        2 在父组件中找到子组件标签 在子组件标签上使用v-bind:自定义数据="要发送的数据"

      子组件向父组件
        1 在子组件中定义事件 使用defineEmits来发送数据
        <button @click="事件"></button>

        const emit=defineEmits(['方法名1','方法名2', ...])

        const 事件=()=> {
          emit('方法名1',要传递参数)
          emit('方法名2',要传递参数)
          ...
        }

        2 在父组件中找到子组件标签 在子组件标签上使用@方法名1="新的方法名"
        <子组件标签 @方法名1="新的方法名"></子组件标签>

        const 新的方法名=(data)=> {
          console.log(data)
          // data就是子组件传递过来的数据
        }

      非父子组件
        1 安装mitt插件 
        cnpm i mitt --save-dev
        2 创建bus.js文件  
        import mitt from 'mitt'

        const bus=mitt()

        export default bus
        3 在需要发送数据的组件 使用bus.emit发送数据 
        import bus from '路径'

        const 事件=()=> {
          bus.emit('新的方法名', 要发送的数据)
        }

        4 在需要接受数据的组件中 使用bus.on接受数据
        import bus from '路径'

        bus.on('新的方法名', (data)=> {
          console.log(data)
          // data就是传递过来的数据
        })

      vue3中provide inject
        使用场景：
          可以实现非父子组件传值(父组件的父组件想要给你子组件传值)

        1 在需要发送数据组件中 使用provide('自定义属性名',要发送的数据)
        import {provide} from 'vue'

        provide('自定义属性名',要发送的数据)

        2 在需要接受数据的子组件中 使用inject('自定义属性名')来获取数据
        import {inject} from 'vue'

        inject('自定义属性名')  // 该值就是发送过来的数据

        注意：
          使用provide和inject只能实现自上而下组件数据传值  这个值的传递是不可逆
        

    vue3中watch数据监听
      格式：  
        import {watch} from 'vue'

        // 第一个参数 如果直接写的是数据  代表当前的数据 为基本数据类型中数据
        watch(被监听的数据, (val, oldVal)=> {
          console.log(val, oldVal)   // 新值  老值
        },{immediate: true, deep: true})
        // immediate 是否立即执行数据监听
        // deep  是否对嵌套过身的数据 进行深度监听

        // 如果第一个参数监听的为对象  则第一个参数应付写为 函数形式  

        const obj={
          name: '111'
        }

        watch(()=> obj.name, (val, oldVal)=> {
          console.log(val, oldVal)   // 新值  老值
        },{immediate: true, deep: true})
        // immediate 是否立即执行数据监听
        // deep  是否对嵌套过身的数据 进行深度监听

        // 如果监听数据有多个

        watch([数据1，数据2], ([数据1新值, 数据2新值],[数据1老值, 数据2老值])=> {
          console.log(数据1新值, 数据2新值)
          console.log(数据1老值, 数据2老值)
        })

      vue3 computed计算属性
      当函数表达式比较复杂的时候我们可以使用
        格式：  
          import {computed} from 'vue'
          const msg='hello'

          // 推荐使用
          const 常量名=computed(()=> {
            return 计算方法
          })

          常量名直接当作data来进行使用


          对象   了解
          const 常量名=computed({
            get: ()=> {
              return 计算方法
            },
            set: (val)=> {
              msg.value=val
            }
          })

          console.log(常量名)  // 相当于执行get方法
          常量名.value=新值  // set val等价新值
          console.log(常量名.value) // 相当于执行到了set方法


    https://www.imooc.com/learn/861