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

        选项式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。

---

---

 路由嵌套：

            有两个组件add2.vue，add3.vue.

            实现路由访问add3.vue界面，最终显示add2界面 嵌套了add3界面。

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

     2）设置路由响应位置

        3）直接访问路由add3