vue3学习

目录

一、vue3特性

二、开发环境

三、开发环境

四、Setup

五、ref reactive来定义响应式数据

六、toRefs

七、script Setup(vue3.2版本)

八、计算属性(computed)

九、侦听(watch)

十、组件通讯

  1、父传子

  2、子传父  

十一、插槽

十二、路由useRoute和useRouter

十三、Vuex store

---

一、vue3特性

  1、性能比vue快

  2、体积小，按需编译

  3、组合式API

二、开发环境

  1、引入script资源

    <script src="https://unpkg.com/vue@next"></script>

  2、使用vue create 项目名创建

三、开发环境

  1、创建vue实例语法:

   const app = Vue.createApp({

        //选项

         data(){

          return{

          }

         }

    })

    app.mount('#app')   //挂载

  2、脚手架创建vue3项目

   vue create 项目名

四、Setup

  概念:setup 选项是一个接收 props 和 context 可以返回一个对象的函数,需返回定义的数据，否则页面中将无法显示

  语法:

     setup(props,context){

       //定义数据

       return{

        //返回数据

       }

     }

五、ref reactive来定义响应式数据

  1、数据是基本数据

    需要使用ref来包裹基本数据类型数据，使用时需要.value来获取值

  2、数据是对象

    需要使用reactive来包裹复杂数据类型数据

  3、使用

    --先导入ref和reactive

      import {ref,reactive} from 'vue'

    --基本数据类型

      let message = ref('this is basic data type')

    --复杂数据类型

      let user = reactive({

        name:'jack',

        age:18

      })

六、toRefs

  概念:toRefs会将我们一个响应式的对象转变为一个普通对象，然后将这个普通对象里的每一个属性变为一个响应式的数据

  使用:

   --先导入toRefs

    import {toRefs} from 'vue'

   --在setup中返回数据的地方加入...toRefs(数据)

   --在显示数据时，即可不用在对象名.值

    例:

      template中

        <h1>{{name}}</h1>

      setup定义数据中

        let user = reactive({

          name:'jack',

          age:18

        })

      setup返回数据中

        return{

          ...toRefs(user)

        }

七、script Setup(vue3.2版本)

  概念:只需要在script标签中加上setup属性，组件在编译的过程中代码运行的上下文是在setup()函数中，无需return，template可以直接使用

  语法:

   <script setup>

     //定义响应式数据即可

   </script>

八、计算属性(computed)

  语法:

     const count = computed(()=>{

       return  num.value * 2//计算的值

     })

     表示侦听num值的变化，变化时执行count中的计算

九、侦听(watch)

  语法:

   watch(侦听的对象,(newVal,oldVal){

      //侦听需要做的操作

   },{inmediate:ture,deep:true})

   三个参数:

      1、侦听的对象

      2、侦听后的回调函数

      3、可选项，

十、组件通讯

  定义一个子组件Chlid,在父组件中引入使用,在父组件使用子组件的地方绑定一个自定义事件

   <Child name="rose"></Child>

  1、父传子

   setup方法:

     --使用props定义props

       props{

        name:String

       }

     --在setup中使用props

       setup(props){

        return {

          props

         }

       }

     --template中直接{{props.name}}即可使用

   3.2setup版本方法:

     --导入defineProps(可不导入)

       import {defineProps} from 'vue'

     --直接定义接收参数

       const props = defineProps({

        name:String

       })          

     --页面直接使用即可                                      

  2、子传父  

   方法一：

     --在父组件使用子组件的地方，自定义方法

      @getmessage="getmessage"  getmessage为方法执行的函数

     --在setup中使用defineEmits接收父组件的自定义的方法名，赋值给emit

      const emit = defineEmits(['getmessage'])

      const emit = defineEmits(['自定义方法名'])

     --在子组件中定义一个触发事件用于传输参数

       @click="sendMessage"

     --执行sendMessage事件传输值

       const sendMessage = ()=>{

        emit('getmessage','hello')

        emit('自定义方法名','参数')

       }

     --在父组件中执行自定义方法，接收参数

      const getmessage = (接收到的形参) =>{

        //函数体

      }

   方法二(实现父子之间双向绑定):

      --先父传子：

        --在父组件使用子组件的地方使用v-model绑定需要传送给子组件的值

         <Child v-model:age="user.age"></Child>

        --在子组件setup中的defineProps中接收值并定义类型即可

          const props = defineProps({

            age:Number

          })

      --再子传父：

        --在子组件中定义一个触发事件用于传输参数

          @click="sendMessage"

        --在setup中使用defineEmits定义update:修改的值

          const emit = defineEmits(['update:age'])

        --执行sendMessage事件传输值

          const sendMessage = ()=>{

            emit('update:age',50)

            emit('自定义方法名','参数')

          }

        --在父组件中直接使用即可实现父子组件的双向绑定

十一、插槽

  1、使用solt定义插槽，可以定义name属性给插槽定义名称，在父组件中使用#名称表示

  2、作用域插槽

    --使用scope传输值

     <slot name="footer" :scope="需要传送的响应式值">

      例setup中:

        const user = reactive({

          name:'jack',

          age:18

        })

    --使用插槽的位置

     <template #footer="{scope}">

       <span>姓名：{{scope.name}}---年龄：{{scope.age}}</span>

     </template>

十二、路由useRoute和useRouter

  1、引入useRoute和useRouter

   import {useRoute,useRouter} from 'vue-router'

十三、Vuex store

  1、引入useStore即可使用vuex中的dispatch和getters方法

   import {useStore} from 'vuex'

   const store = useStore()

   store.dispatch和store.getters