Vue3.0+TS 学习笔记

作者: 邦_ | 来源:发表于2024-02-28 11:24 被阅读0次

截屏2024-02-28 17.41.17.png

谷歌浏览器vue插件下载和安装,百度搜索“极简插件”

vue3中兼容vue2的语法

setup比data中数据赋值的早

setup 语法糖学习

-D表示开发依赖
安装这个是为了组件的名字也能写在setup 标签内

 npm i vite-plugin-vue-setup-extend -D

安装完成之后在vite.config.ts 中引入才可以起作用

import vueSetupExtend from "vite-plugin-vue-setup-extend";
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueSetupExtend()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },

使用ref创建基本类型、对象类型（内部还是通过reactive实现的）的响应式编程
使用reactive创建对象类型数据的响应式编程

配置volar 自动配置value

截屏2024-03-04 17.18.35.png

截屏2024-03-04 17.33.48.png

截屏2024-03-04 17.40.18.png

computed 有计算缓存多次调用相同的会直接从缓存读取，不会多次执行
所以涉及多次调用生成相同值的用computed 效率比较高

watch 能监视5种情况（官方是说4种情况，其实是五种）

截屏2024-03-05 17.52.32.png

改变对象的话
reactive修饰的对象地址没变化，里面的属性，相同的值覆盖了
reactive 会隐式的创建深层监听，deep即使设置为false也关不掉监听


    Object.assign(person, { name: "项羽", age: 20 })

ref的话，直接替换了对象

    person.value = { name: "项羽", age: 20 }

截屏2024-03-06 14.46.39.png

截屏2024-03-06 14.54.46.png

截屏2024-03-06 14.59.27.png

感觉有问题 ||的条件写在一起前边的符合了才会打印，后边的改变了没触发为了不出问题建议或者的多条件的分开成多个写

截屏2024-03-06 18.11.43.png

ref标签可以解决id冲突问题
ref 获取组件中的属性需要

defineExpose({
   a, b, c
})

Hooks里面可以写生命周期函数，根据各自的生命周期执行函数

反向单引号`叫做模板字符串
第一种query传参方法:

     <RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}
            </RouterLink>

第二种query传参方法:

     <RouterLink :to="{
            path: '/news/detail',
            query: {
                id: item.id,
                title: item.title,
                content: item.content
            }
        }">{{ item.title }}

从响应式的对象身上直接解构，会丢失响应，可以用torefs

import { toRefs } from 'vue';
import { useRoute } from 'vue-router'
let route = useRoute();
let { query } = toRefs(route);

第一种params方式传参，路由中需要配置相应接收参数


        <RouterLink to="/news/detail/哈哈/你好/嘿嘿">{{ item.title }}
            </RouterLink>
       <RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}
            </RouterLink>
{
      name: "xinwen",
      path: "/news",
      component: News,
      children: [
        {
          path: "detail/:id/:title/:content",
          component: Detail,
        },
      ],
    },

第二种params方式传参

   <RouterLink :to="{
            name: 'detail',
            params: { id: item.id, content: item.content, title: item.title }
        }">
                {{ item.title }}
            </RouterLink>

params不能传递对象