阅读Vue3官方文档有感

2025-07-01 17:05 WEB前端小菜鸟阅读(25) 评论(0) 收藏举报

pnpm create vue@latest 官方脚手架

Vue - Official 扩展官方的vscode插件

app.config.globalProperties 配置全局常量，以便子子孙孙组件使用，

组件直接用

计算属性：基于其响应式依赖而缓存，方法是每次都更新，万一这个列表有1w个呢，不可能再去循环一万次涩

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存，方法不会缓存。

这种写法也行，就怕这个页面其他地方也是这种写法，就比较重复，就用计算属性来写一波，就好比计算属性来封装一次，直接调用，避免重复劳动；

模板中写太多逻辑，会让模板变得臃肿，难以维护，用计算属性就要简洁的多

<!-- 普通写法 -->
<div v-for="(item,index) in currentPageObj.people" :index>{{ item.age>=18? '成年人':'未成年' }}</div>
<!-- 计算属性写法，这里的数据打印一下看，相当于改变了数组，然后再来循环 -->
<div v-for="(item,index) in isChengNian" :index>{{ item }}</div>

//这种是vue3的计算属性写法（组合式API的写法）

const isChengNian = computed(() => {

return currentPageObj.people.map(person => {

return person.age >= 18 ? '成年人' : '未成年人';

});

})

//这种是Vue2 的写法（选项式API的写法）举个栗子

computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },

还可以get set来可改变的计算属性，具体看官网；Getter 不应有副作用

事件修饰符：

@click="warn('Form cannot be submitted yet.', $event)"

warn(message, event) {} 常见如获取点击的地方的坐标

@click.stop="childClick 阻止事件冒泡。事件冒泡是指当一个元素触发事件后，该事件会从最内层的元素开始，向外层元素依次触发。（常见一个大的div有点击事件，div里面的按钮也有点击事件，按钮加stop）

a href="https://example.com" @click.prevent>点击我不会跳转</a>
  <form @submit.prevent="handleSubmit">
    <input type="submit" value="提交">
  </form>

阻止事件的默认行为。比如点击 <a> 标签会默认跳转到 href 指定的链接，提交表单会默认刷新页面，使用 .prevent 可以阻止这些默认行为。其他自己百度

　　按键修饰符：

<input @keyup.enter="submit" /> 常见登录
<!-- Alt + Enter --> 

<input @keyup.alt.enter="clear" /> 了解就行

Watch:计算属性允许我们声明性地计算衍生值。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。

watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：

补充知识getter函数：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/get；豆包AI:我一直不明白js中所谓的getter函数

watch和watchEffect 说人话区别是啥

ref引用获取DOM

刷新页面返回顶部

WEB前端小菜鸟

阅读Vue3官方文档有感

About