setup():

<template>
  <div id="one">
    <img src="" alt="">
    <h1>Hello World</h1>
    <h1>{{ text }}</h1>
<!-- 使用双花括号来变量括起来，进行渲染，定义的变量在下面 -->
  </div>
</template>

export default {
    //vue3的setup()函数，执行的顺序在vue页面中排第一
    //setup(props)函数，中的props是用于父子组件之间用于传参的一个参数
    //setup()函数中可以通过return来返回一个对象，这个对象可以用于页面的数据绑定
    //和data()函数的区别，data()函数只能返回一个字符串
    //setup()函数可以返回一个函数对象，把function xxx()函数赋值给text变量
    //在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用
    //生命周期的函数只能写在setUp中
    setup(){
        function getA(){
            return "getA()函数中返回的字符串"
        }
        return{
            //直接在这里给变量text赋值，可以在页面数据绑定中使用,赋值的内容为一个函数对象
            text:getA(),
        }
    }
}

组件:

注册组件

Watch

在setup()中使用，监听数据变化时执行相应操作

https://www.cnblogs.com/baifangzi/p/14234981.html

1. 监听普通类型

 let count = ref(1);
 const changeCount = () => {
	 count.value+=1
 };

watch(count, (newValue, oldValue) => { //直接监听
	console.log("count改变了");
});

2.监听响应式对象

let book = reactive({
    name: "js编程",
    price: 50,
});
const changeBookName = () => {
	book.name = "c#"; 
};
watch(()=>book.name,()=>{//通过一个函数返回要监听的属性
	console.log('书名改变了')
})

watch (data,(newdata) => {
	consol.log(newdata)
})
//data 原始数据（实参）
//newdata 新数据传入（形参）
//当data变化时，把变化的新数据传入newdata，

vue3中可以有多个watch，vue2中只能有一个watch

vue中判断对象为空

结构体如下

在调用text.value时，因默认情况下text为空报错

解决方法

使用 typeof 对text进行判断是否为 undefined

存在问题

当判断text.value时会失效，因为text就不存在，value更不用说了所以直接判断text就可以了

依据

在ESLint 0.5.0中引入 typeof 操作符，用于强制与有效的字符串进行比较 ESLint文档地址

typeof通常与以下字符串比较：undefined、object、boolean、number、string、symbol和bigint

与其他字符串比较时，通常是个书写错误

Options

该规则有一个对象选项：

• "requireStringLiterals": true 要求 typeof 表达式只与字符串字面量或其它 typeof 表达式 进行比较，禁止与其它值进行比较。

错误 代码示例：

/*eslint valid-typeof: "error"*/

typeof foo === "strnig"
typeof foo == "undefimed"
typeof bar != "nunber"
typeof bar !== "fucntion"

正确 代码示例：

/*eslint valid-typeof: "error"*/

typeof foo === "string"
typeof bar == "undefined"
typeof foo === baz
typeof bar === typeof qux

选项 { "requireStringLiterals": true } 的 错误 代码示例：

typeof foo === undefined
typeof bar == Object
typeof baz === "strnig"
typeof qux === "some invalid type"
typeof baz === anotherVariable
typeof foo == 5

选项 { "requireStringLiterals": true } 的 正确 代码示例：

typeof foo === "undefined"
typeof bar == "object"
typeof baz === "string"
typeof bar === typeof qux

v-for中的key理解

v-for 是循环，可以把数组中的元素遍历出来，

vue3中，必须要有key参数，key就相当于索引，

vue3中组件的注册

//子组件：
export default {
    name:'menu',
    ……
}

//父组件：
import menu from '***.vue';
export default{
    //一定要注意components的拼写
    //有b
    components:{'menu1':menu}   
    components:{submenu}
    setup(){
        ……
    }
}

<menu1 />

ref主动获取子组件的数据

父子组件传值

https://www.yuque.com/huihuiwa/fttryd/ollemb

子组件:

<q-expansion-item
          expand-separator
          :header-inset-level="initLevel"
          :to="item.path"
          :icon="item.icon"
          :label="item.label"
          @click="change(item.label)"
        >
              
export default ({
	name:'submenu',
	emits:['Ctitle'],
	setup(props,ctx){
        function change(lable){
            ctx.emit('Ctitle',lable);
        }
    }
	return{
        change,
    }
})

父组件:

<submenu :my-router="menuList" :init-level="0" @Ctitle="recivetitle" />
 
export default({
	componets:{submenu},
    setup(){
        function recivetitle(params:string){
            consol.log(params,'接收到的参数')
        }
    }
	return{
        recivetitle
    }
})
    

祖孙传值:

https://www.jianshu.com/p/e5c9fe40e429

axios接收到数据后跳转到catch的解决方法

vue3中axios写法

function loadData(){
    api.get('/xxx')
     .then((response)=>{
        data = respose.data
    })
    .catch(error =>{
        console.log(error)
    })
}

上面的写法是文档中的写法

function loadData(){
    api.get('/xxx')
     .then((response)=>{
        data = respose.data
    })
    .catch((){
        console.log(error)
    })
}

这是自己写的

差距在.catch中少了error，

把error加上后，会在控制台中显示出错误信息

跳转原因：

1. 看接口是否有问题

2. then中有没有错误的代码

   then中出错后也会跳转到.catch

解决办法：

按照官网的写法，把错误信息传进去打印出来，根据报错调试解决。

quasar api代理

应该在boot/axios.ts中配置 api的 baseURL， 配置quasar.conf.js无效

quasar中引用scss 作用域为全局的解决

引入外部资源的方法为

<style>
@import url(...);
</style>

这样引入的外部资源文件的作用域为全局

Add “scoped” attribute to limit CSS to this component only

这句话大家应该是见多了, 我也使用scoped, 但是使用@import引入外部样式表作用域依然是全局的，看了一遍@import的规则后, 进行初步猜测，难道是@import引入外部样式表错过了scoped style?

又回想到此前看过的前端性能优化文章里面都有提到，在生产环境中不要使用@import引入css，因为在请求到的css中含有@import引入css的话，会发起请求把@import的css引进来，多次请求浪费不必要的资源。

@import并不是引入代码到里面，而是发起新的请求获得样式资源，并且没有加scoped

我们只需把@import改成引入外部样式，就可以解决样式是全局的问题

<style scoped src="../static/css/user.css">
<style scoped>
.user-content{
  background-color: #3982e5;
}
</style>

ts

声明ref的num变量

let ListNum: number = ref(3);

esLint 报错

Unsafe assignment of an `any` value.eslint@typescript-eslint/no-unsafe-assignment

原因：

• 有默认值的变量不需要声明类型

写法

let ListNum = 3;