vue复习(二)

本文详细讲解了HTML/CSS/JS中的鼠标事件、事件修饰符、v-model的特性,包括双击、单击、焦点变化、性能优化、v-if/v-show区别以及父子组件间的传值方法。涵盖了前端开发和基础运维等领域。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.事件对象属性

 项目                   

                     Value

dblclick

双击鼠标左键时发生,如果右键也按下则不会发生

click  

单击鼠标左键时发生,如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时,同样会触发这个事件

mousedown  

单击任意一个鼠标按钮时发生

 mouseout

 鼠标指针位于某个元素上且将要移出元素的边界时发生

mouseover  

鼠标指针移出某个元素到另一个元素上时发生

  <div id="app">
        <input type="text" placeholder="请输入内容" @focus="focus" v-bind:placeholder="placeholder" @blur="blur" @click="click" @dblclick="dblclick" @mousedown="mousedown" @keyup.enter="search" >
        <!-- 鼠标事件 -->
        <!-- <div class="box" :class="{'box-leave':isshow}">
        </div> -->
    </div>


 new Vue({
        el:'#app',
       data:{
         placeholder:'请输入你的内容'
       },
       methods:{
       focus(){
        this.placeholder="获得焦点事件"
       },
       blur(){
        this.placeholder="失去焦点事件"
       },
    //    单击
       click(){
    //     console.log('需要单击才能成功');
       },
    //    双击
    dblclick(){
        // console.log('需要双击才会出来');
    },
    mousedown(){
        // console.log('任意点击鼠标键都可以出现');
    },
    search(){
        // console.log('输入键盘事件');
    } 
    }
     })

2.事件修饰符

1.prevent:阻止默认事件

2.stop:阻止事件冒泡(常用)

3.once:事件只触发一次(常用)

4.capture:使用事件的捕获模式;

5.self:只有event.target是当前操作的元素时才触发事件

6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕

3.v-model修饰符 

.lazy:在我们文本框失去焦点的时候再帮我们将文本框的值同步给Model

.number:可以使两个数据进行相加减

.trim:去除空格的,但是他只会去除文本框两端的空格,中间的不会去除

 4.key属性的作用

key的含义

这里的key一般指的是key值,它主要用来管理可重复使用的元素,也就是可复用的元素。

 1. 提升v-for渲染的效率

 2. 提高渲染性能

3.避免数据混乱的情况出现 

5.v-if与v-show的区别 

v-show:本质就是 标签display设置为none,基于css进行切换

          有更高的初始渲染消耗

          适合频繁切换的情况

    v-if:动态的向DOM树内添加或者删除DOM元素

          有更高的切换消耗

          适合运行条件很少改变的情况

6.v-for与v-if一同使用的注意事项 

  1. 永远不要把 v-if 和 v-for 同时用在同一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)

  2. 如果避免出现这种情况,则在外层嵌套template(页面渲染不生成dom节点),在这一层进行v-if判断,然后在内部进行v-for循环(如图以)

  3. 如果条件出现在循环内部,可通过计算属性computed提前过滤掉那些不需要显示的项(图二)

图一: 

<template v-if="isShow">
    <p v-for="item in items">
</template>

图二:

computed: {
    items: function() {
      return this.list.filter(function (item) {
        return item.isShow
      })
    }
}

 7.父子之间传值的方法

 父组件向子组件传值:props

可以通过基本方法在父组件进行更删改查等,都可以传递到子组件中

 

 

子组件向父组件传值:数组的方法 ,$emit ,$event 

 

 8.单页应用:

单页面应用指一个系统只加载一次资源,然后下面的操作交互、数据交互是通过router、ajax等来进行,页面并没有刷新,页面只在最开始前刷新一次。

优点:

单页应用则是一次性把web应用的所有代码(HTML,JavaScript和CSS)全部请求过来,有时候考虑到首屏加载太慢会按需加载。这样一来,以后用户的每一个动作都不会重新加载页面

<think>嗯,用户之前问了JavaScript复习重点,现在又问Vue3的复习。可能他正在准备前端相关的面试或者考试,需要系统地复习这些技术点。之前我给的JavaScript复习结构比较清晰,用户可能希望Vue3部分也能有类似的层次结构,方便他逐步学习和查漏补缺。 首先,我要确定用户对Vue3的了解程度。可能是已经学过Vue2,现在需要升级到Vue3,或者直接学习Vue3。考虑到Vue3和Vue2的区别挺大的,我需要重点对比两者的不同,比如Composition API和Options API的区别,响应式系统的变化等。 接下来,用户可能需要核心概念的复习,比如响应式原理、组件化、生命周期这些。Vue3中新增了setup语法、Teleport、Suspense等特性,这些都是必须涵盖的点。另外,组合式API的使用频率高,面试中常被问到,需要详细说明。 然后,用户可能关心Vue3的新特性和优化,比如性能提升、Tree-shaking支持,以及TypeScript的集成。这些都是Vue3的重要卖点,应该在复习重点中强调。 还要考虑工程实践,比如Vite的使用,Vue Router和Pinia的状态管理。这些工具和库在实际项目中常用,复习时不能忽略。 高频考点方面,用户可能想知道面试常问的问题,比如响应式原理、Composition API的优点、虚拟DOM优化等。需要整理这些点,并给出示例代码,方便用户理解。 最后,复习建议部分应该包括学习资源和实践建议,比如推荐官方文档、实战项目,以及注意TypeScript的结合使用。用户可能希望有明确的学习路径,避免浪费时间在不重要的内容上。 需要注意的是,用户可能希望回答结构清晰,分点列出,便于记忆和复习。同时,代码示例要准确,符合Vue3的语法规范,特别是组合式API的写法。另外,对比Vue2和Vue3的区别能帮助用户更快过渡,应该包含这部分内容。 总结下来,回答的结构应该包括核心概念、新特性、工程实践、高频考点和复习建议,每个部分再细分具体内容,并附上代码示例和注意事项。这样用户能系统地掌握Vue3的重点,应对面试或实际开发需求。</think>以下是针对Vue 3的**核心复习要点梳理**,按技术分层与高频考点分类,帮助系统性掌握关键知识: --- ### 一、核心概念与基础语法 #### 1. **响应式系统** - **核心原理** - 基于Proxy实现响应式(Vue 2使用`Object.defineProperty`) - `ref`与`reactive`的区别: ```javascript const count = ref(0); // 包装基本类型(通过.value访问) const state = reactive({ // 直接包装对象 name: 'Vue3' }); ``` - **响应式工具** `toRefs`(解构响应式对象)、`computed`、`watch`、`watchEffect` #### 2. **组合式API(Composition API)** - **`setup`函数** ```javascript setup(props, context) { // 在此定义响应式数据、方法 return { ... } // 暴露给模板 } ``` - **逻辑复用** 使用`useXxx`函数封装可复用逻辑(替代Vue 2的Mixins) 示例: ```javascript // useCounter.js export function useCounter() { const count = ref(0); const increment = () => count.value++; return { count, increment }; } ``` #### 3. **生命周期钩子** - Vue 3生命周期前缀改为`on`: ```javascript import { onMounted, onUpdated } from 'vue'; setup() { onMounted(() => { console.log('组件挂载') }); } ``` - 与Vue 2对应关系: `created` → `setup`中直接执行代码 `mounted` → `onMounted` --- ### Vue 3新特性与优化 #### 1. **性能提升** - 虚拟DOM优化:静态节点提升(Hoist Static)、补丁标记(Patch Flag) - Tree-shaking支持:按需引入API减少打包体积 #### 2. **新组件与API** - **`<Teleport>`**:将组件渲染到DOM任意位置 ```html <teleport to="body"> <Modal /> <!-- 将弹窗渲染到body下 --> </teleport> ``` - **`<Suspense>`**:异步组件加载状态管理 ```html <Suspense> <template #default><AsyncComponent /></template> <template #fallback>Loading...</template> </Suspense> ``` - **`v-model`升级**:支持多个双向绑定 ```html <ChildComponent v-model:title="pageTitle" v-model:content="pageContent" /> ``` #### 3. **TypeScript支持** - 源码使用TypeScript重写 - 类型推断优化:组件Props、Emit类型声明更直观 ```typescript interface Props { msg: string; } const props = defineProps<Props>(); ``` --- ### 三、工程实践与高频考点 #### 1. **Vite项目配置** - 开发服务器基于ESM原生支持,热更新极速 - 配置文件`vite.config.js`常用配置: ```javascript export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src') } } }); ``` #### 2. **状态管理(Pinia)** - 替代Vuex的轻量级方案 - 核心概念:`defineStore`定义Store ```javascript export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } } }); ``` #### 3. **Vue Router 4** - 路由定义变化: ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', component: Home } ] }); ``` - 组合式API用法: ```javascript import { useRoute, useRouter } from 'vue-router'; const route = useRoute(); // 当前路由信息 const router = useRouter(); // 路由跳转方法 ``` --- ### 四、高频面试问题与技巧 1. **Vue 3 vs Vue 2核心区别** - 响应式原理(Proxy vs Object.defineProperty) - Composition API vs Options API - 性能优化策略(如Fragment、静态提升) 2. **响应式原理深入** - 如何手动实现简易Proxy响应式系统? - `ref`为什么需要.value访问? 3. **虚拟DOM Diff算法优化** - 静态节点标记、动态属性标记 --- ### 五、复习建议 1. **优先级排序** Composition API > 响应式原理 > 新特性(Teleport/Suspense) > 性能优化 > 生态工具(Pinia/Vue Router) 2. **实战验证** - 使用Vite搭建项目,体验组合式API - 手写简易响应式系统(Proxy实现) - 对比Vue 2与Vue 3组件写法差异 3. **学习资源** - 官方文档:[Vue 3官方文档](https://vuejs.org/) - 源码分析:GitHub Vue 3源码核心模块(如reactivity) - 实战项目:TodoList、电商后台管理系统 --- **注意**:复习时重点关注组合式API的灵活性与TypeScript深度集成,同时理解底层原理(如Proxy响应式)是面试加分项。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值