Vue3学习日记 Day1

一、简介

1、简介

    Vue3是新的默认版本，拥有更快的速度，更好的语法

二、使用create-vue搭建Vue3项目

1、创建项目

1、介绍

    create-vue是Vue官方新的脚手架工具，底层切换为了vite，为开发提供极速响应

2、使用

    2.1、确定环境条件

        2.1.1已安装16.0或更高版本的Node.js

        node -v

    2.2、创建一个Vue应用

        npm init vue@latest

2、认识文件

1、vite.comfig.js —— 基于vite的配置

2、main.js —— createApp函数创建应用实例

    //将创建进行了封装，保证了每个实例的独立封闭性

    //如：

    // 路由：createRouter 仓库：createStore

    //注：

    // createApp(App).mount('#app')中

    // mount('#app')指，设置挂载点为id = app的位置

3、app.vue

    //script加上setup，允许在script中直接编写组合式API

    //模板template不再要求唯一根元素

    //组件不再需要单独注册，导入即可使用

4、assets

    //图片、样式文件的目录

5、components

    //组件目录

三、组合式API

1、setup

1、介绍

    setup是组合式API的入口

2、用法

    setup(){

        //语句，执行时机在beforeCreate之前  

        //注：setup中，获取不到this

        //注：在setup中可以提供数据和函数，但若要在template中使用，需要return                 

        //如：

        const message = 'Hello Vue3!'

        const logMessage = () =>{

            console.log(message)        

        }  

        return{

            message,

            logMessage        

        }                   

    },

2、<script setup>语法糖

1、介绍

    当使用了<script setup>后，就不再需要

     export default{

         setup(){

             return{

                 ...             

             }         

         }

    }

    而是可以直接快捷的编写

2、示范：

    <script setup>

      const message = "This is message"

      const logMessage = () =>{

        console.log(message);

      }

    </script>

    

    <template>

      <div class="index">

        {{ message }}

      </div>

      <button @click="logMessage">logMessage</button>

    </template>

3、reactive

1、作用

    接受对象类型数据的参数传入，并返回一个响应式的对象

    

2、使用

    2.1、导入

        import { reactive } from 'vue'

    2.2、执行函数

        const state = reactive(对象类型数据)

    //注：只可以接受对象类型

4、ref —— 建议只用这个

1、作用

    接受简单类型或对象类型的数据，并返回一个响应式的对象

    

2、使用

        import { ref } from 'vue'

    2.2、执行函数

        const state = ref(简单或对象类型数据)

    //本质上是在将简单类型包装为复杂类型后，再借助reactive实现的响应式

    2.3、示例

        let kg = ref({

            count:100,

            like:50        

        })

        

3、注

    3.1、在脚本中访问数据，需要通过.value

    3.2、在template中，不需要通过.value

5、computed

 1、作用

    与vue2基本一致，只是修改了写法

    

2、使用

    2.1、导入

        import { computed } from 'vue'

    2.2、执行函数

        const computedState = computed(() => {

            return 计算后的值        

        })

        

3、扩展使用

    //computed默认只读，可以通过get和set语法创建可写的ref

    //但默认情况应该避免修改计算属性的值

    //如：

      const computedList = computed({

      get: () => count.value + 1,

      set: (val) => {

        count.value = val + 1

      }

    })

6、watch

1、作用

    侦听一个或多个数据的变化，数据变化时执行回调函数

    

2、基本使用

        import { watch } from 'vue'

    2.2、执行函数

        watch(count, (newValue,oldValue) => {

            console.log(`count发生了变化，老值为${oldValue}，新值为${newValue}`)        

        })

        

3、侦听多个数据

    watch([count,name],([newCount,newName],[oldCount,newCount]) =>{

        console.log('count或者name变化了',[newCount,newName],[oldCount,oldName])    

    })

    

4、配置项

    4.1、immediate

        //在侦听器创建时立即触发一次回调，响应式数据变化后继续执行回调

    4.2、deep

        //进行深度监视，watch默认进行的是 浅层监视，无法监测到复杂类型内部数据的变化

    4.3、精确监听

        //在不开启deep的前提下，对精确的数据进行监听，只有数据变化时才执行回调

        4.3.1、语法

            () => 数据,

            (newValue,oldValue) => 执行事件             

        

三、生命周期API