Vue 选项式api和组合式api 路由嵌套

news2024/9/20 14:36:40

选项式api和组合式api是两种不同的语法习惯，<template>标签内还是该怎么写就怎么写，不一样的只是<script>里面的语法改变了。

选项式api：

组合式api：

1)省略各种关键字：

省略前：

省略后：

2）声明响应式数据 ref()函数

3）嵌套组件间参数传递

4)变量解构赋值

5）computed()函数

6）生命周期函数

路由嵌套：

1）在add2的路由中设置cildren属性。

2）设置路由响应位置

3）直接访问路由add3

选项式api：

import { } from ' '

export default{

components:{ }, // 挂载import导入的组件对象

data(){ }, // 定义对象及属性值

methods(){ }, // 创建函数对象

mounted(){ } // 各种生命周期函数

}

<script>    //model
import HelloWorld from   '@/components/HelloWorld.vue'
import qs from "qs"

export default{
   components:{
   HelloWorld
   },
   data(){
    return{
        student:{
        name:"张三",
        age:5
        },
        url:"https://www.baidu.com",
        加粗内容:"<b>我不喜欢钱</b>",
        score:999
      }
   },
   methods:{
    show(){
      alert(JSON.stringify(this.student))
    }
   ,
   testPost(){
       this.$axios({
         url:"/demo",
        method:"post",
         data:qs.stringify({ //使用qs.stringify({}) 将json数据转换为普通的键值对表单数据，后端单元方法直接声明形参接收
                             //不使用qs.stringify({}) 直接发送请求体格式的请求数据，后端单元方法必须使用@RequestBody注解来接收
           name:'张三',
           age:20
         }) 
       }).then(res=>{console.log(res)})
      }
   }
}
</script>

组合式api：

1)省略各种关键字：

使用组合式api，只需要在<script >添加关键字setup

                标签内部的关键字export default  data return 都可以省略不写

并且import导入的资源无需手动挂载

省略前：

省略后：

  2）声明响应式数据 ref()函数

          const直接声明的name，age是常量，只能渲染一次。

而使用ref()和reactive()声明的变量值可以多次更改。

ref() reactive()区别在于：

通常使用ref()声明变量

reactive()参数接收的必须是一个对象。用来处理对象嵌套对象时使用该函数。



3）嵌套组件间参数传递

在MyAdd3组件中嵌套一个MyAdd4组件，进行参数传递id4=123。

在MyAdd4中使用 defineProps([ ])接收参数，直接使用

4)变量解构赋值

使用toRef()函数进行解构。

5）computed()函数

虽然能在<template>标签中直接进行三目运算符运算，但是为了提高效率，通常使用computed()函数事先储存运算结果，只有在检测到变量改变时才重新进行方法调用，该函数类似于生命周期函数。

6）生命周期函数

和选项式api一样，不过方法名前多加了一个on。