Vue3笔记记录，25年2月版vue: 3.5.13

看晴天了
311 阅读4分钟

1、创建vue3，vue3的插件vue-official

npm init vue@latest vue3使用vue-official vue2使用vuter image.png

2、关闭新版本vue-devtools页面工具

将以下两行注释即可关闭24年11新出的版本的调试工具 image.png

3、组合式api

1、setup选项

添加setup后台会自动return返回内部定义的值

<script setup>
const message = '哈哈哈哈哈哈'
const logM = () => {
  console.log(message)
}
</script>

<template>
  <div>{{message}}</div>
  <button @click="logM">按钮</button>
</template>

2、reactive()函数必须接收对象类型数据，并返回响应式对象

<script setup>
import {reactive} from 'vue'
const message = reactive({
  count: 100
})
const logM = () => {
  message.count++
}
</script>

<template>
  <div>{{message.count}}</div>
  <button @click="logM">按钮</button>
</template>

3、ref()做响应式，接受简单类型也能接收复杂对象类型，返回一个响应式对象，在原有基础上再包一层对象

<script setup>
//在脚本区域要加上.value
import { ref } from 'vue';
const message = ref(2)
const logM = () => {
  message.value++
}
</script>

<template>
//在结构区域不用加.value后台自动加可直接使用
  <div>{{message}}</div>
  <button @click="logM">按钮</button>
</template>

4、组合式API-computed计算属性函数的使用

<script setup>
import { computed, ref } from 'vue';
const list = ref([1,2,3,4,5,6,7,8])

const computedList = computed(() => {
  return list.value.filter(item => item > 3)
})

const addFn = () => {
  list.value.push(666)
}
</script>

<template>
<div>{{ list }}</div>
<div>{{ computedList }}</div>
<button @click="addFn">按钮</button>
</template>

可写的方法响应式 API：computed核心 | Vue.js image.png

5、watch监听数据的变化，数据变化执行watch中的函数

watch使用前一定要导入import watch form 'vue'
包括：单个监视，多个监视，immediate立即执行，deep深度监视对象，精确监听对象的某个属性。

<script setup>
import { ref, watch } from 'vue';

const list = ref(0)
const arr = ref('张三')
const listFn = () => {
  list.value++
}
const arrFn = () => {
  arr.value = '李四'
}
const userInfo = ref({
  name: '张三',
  age: 18
})
const go = () => {
  userInfo.value.age ++
}

watch([list, arr, userInfo], (newArr, oldArr) => {
console.log(newArr,oldArr)
},{
  //配置后一进页面立即执行
  immediate: true,
  //深度监视对象内部变化
  deep: true
})

//对对象中的属性进行监听
watch(() => userInfo.value.age, (newArr,oldArr) => {
console.log(newArr,oldArr)
})
</script>

<template>
  <div>{{ list }}</div>
  <div>{{ arr }}</div>
  <button @click="arrFn">改名称按钮</button>
  <button @click="listFn">改数字按钮</button>
  <div>{{ userInfo }}</div>
  <button @click="go">修改userInfo</button>
</template>

6、生命周期

常用onMounted image.png

7、父子通讯

父传子
父组件：name=""，响应式用:name=""传ref值
子组件：const props = defineProps({ name: String }) image.png 子传父

image.png

8、通过ref获取dom对象或者组件

先ref(null)定义，然后给组件或dom绑定ref

<script setup>
import { onMounted, ref } from 'vue';
import ToSon from './components/ToSon.vue';

const inp = ref(null)

onMounted(() => {
  console.log(inp)
  inp.value.focus()
})

const clickFn = () => {
  inp.value.focus()
}
</script>

<template>
  <div>
    <input ref="inp" type="text">
    <button @click="clickFn">点击输入</button>
  </div>
  <ToSon></ToSon>
</template>

9、defineExpose编译宏向外暴漏内部定义的方法和属性

父组件用name.value.num()来调用

<script setup>
const num = 999
const say = () => {
  console.log('哈哈哈')
}

defineExpose({
  num,
  say
})
</script>

<template>
  <div>
    测试组件--{{ num }}
  </div>
</template>

10、非父子通信，跨层级传输数据

provide,inject image.png

4、defineOption新特性

<script>
export default {
  name: 'ToIndex'
}
</script>

<script setup>
defineOptions({
  name: 'ToIndex'
})
</script>

<template>
  <div></div>
</template>

image.png

5、defineModel和v-model

image.png

6、pinia使用，比vueX更简洁的数据管理工具

官方文档| Pinia yarn add pinia 在main.js中导入

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()

createApp(App).use(pinia).mount('#app')

1、pinia的基本使用

image.png 在框架全局可导入使用函数获取store其中的数据

import { useCounterStore } from '@/store/count'
const counterstore = useCounterStore()

2、action函数的异步处理，普通函数直接定义即可

import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from 'axios'

export const useChannelStore = defineStore('channel', () => {
  // 声明数据
  const channelList = ref([])

  // 声明操作数据的方法
  const getList = async () => {
    // 支持异步
    const { data: { data }} = await axios.get('http://geek.itheima.net/v1_0/channels')
    channelList.value = data.channels
  }

  // 声明getters相关
  return {
    channelList,
    getList
  }
})

3、从 Store 解构storeToRefs（）方法

const { count, msg } = storeToRefs(counterStore)
const { channelList } = storeToRefs(channelStore)

4、pinia持久化插件，帮助快速本地存储，打开可自动获取

官方文档 image.png

image.png

7、pnpm的使用

pnpm create vue
pnpm install
pnpm dev

8、eslint.config.js

禁用prettier插件，使用自带的"prettier": "^3.4.2",

  {
    rules: {
    'prettier/prettier': [
      'warn',
      {
        singleQuote: true, // 单引号
        semi: false, // 无分号
        printWidth: 80, // 每行宽度至多80字符
        trailingComma: 'none', // 不加对象|数组最后逗号
        endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
      }
    ],
    'vue/multi-word-component-names': [
      'warn',
      {
        ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
      }
    ],
    'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
    // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
    'no-undef': 'error'
  }
  }

9、husky提交远程仓库代码前的检查

image.png

10、导入sass用pnpm add sass -D

11、vueRouter4的使用

环境变量和模式 | Vite 官方中文文档| 配置导航栏默认历史目录 base: '/',

在结构中使用这个
$router.push('/home')//跳转导航
在js中使用这个
const router = useRouter()//获取大路由整体
const route = useRoute()//获取当前路由
router.push("/list")

image.png

12、element puls 组件库的使用

pnpm add -D unplugin-vue-components unplugin-auto-import
安装按需导入后，组件都不用注册了，会自动注册
安装 | Element Plus查看快速开始使用
Button 按钮 | Element Plus

13、api请求数据交互

起步 | Axios中文文档 | Axios中文网

14、登入访问拦截，token存储后可进入后续页面、路由前置守卫

// 登录访问拦截
router.beforeEach((to) => {
  const userStore = useUserStore()
  if (!userStore.token && to.path !== '/login') return '/login'
})

15、defineExpose向外暴漏

const open = (row) => {
  dialogVisible.value = true
}

//向外暴漏
defineExpose({
  open
})

16、富文本编辑器

Introduction | VueQuill

avatar
文章
阅读
粉丝