vue 学习总结(一)

本文深入探讨Vue.js中methods与computed的区别,watch的使用场景,类名及样式绑定技巧,key管理的重要性,v-if与v-show的对比,数组更新检测方法,以及如何正确使用v-on访问原生DOM事件。为开发者提供全面的Vue.js实践指南。

1.methods  和   computed  区别

答:相同:都可以对data里面的数据进行操作。区别:methods每次操作都会重新渲染,重新请求  。  computed 的改变在于其操作依赖是否改变,如果未改变,则继续调用上次缓存下来的内容。  好处:对于相应的数据量较大时,避免了重复请求。节约了开销

2.watch使用场景

答:来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

3.类名及样式绑定

答:v-bind:class="{ classname:value}"    或者  v-bin:class="classObj"  然后在data里面申明     或者   v-bin:class="[classname1,classname2]"   然后在data里面声明;

       v-bin:style="{ font-size:value,color:value}"  然后在data里声明value的值    或者   v-bind:style="styleObj"   然后在data里面声明styleObj

4.key管理  

答:vue  会很大程度的复用已经渲染过的组件,而不会重新加载,为了使有些组件不复用,vue提供了key属性,每次渲染判断key是否相同,不同则可以重新渲染。因此key属性具有唯一性

5.v-if   和  v-show

答:都是根据条件渲染内容,不同的是:v-show元素会被始终渲染并保存在dom中,只是改变css  的display属性 ,而且不支持template元素;而v-if则是根据条件创建和销毁元素;因此如果是频繁操作显隐则最好采用v-show

6.数组更新检测

答:变异方法(改变原数组):push()  pop()   shift()   unshift()   splice()   reverse()   sort()   

  非变异方法(不改变原数组):filter()  slice () concat()

  只能通过该splice()  或者  set () 来变数组   vue才会相应

7.v-on  如果想访问原生DOM事件  ,可以将事件传入函数   v-on:click=“clickHandle(params,$event)”   在函数定义内就可以使用event.stopPropagation()    event.preventDefault()

转载于:https://www.cnblogs.com/tutao1995/p/11058992.html

### Vue3 学习资料总结与最佳实践 #### 1. 创建 Vue3 项目 Vue3 提供了多种方式来初始化项目,推荐使用 Vite 或 Vue CLI。Vite 是基于 ESBuild 和 Rollup 的新代构建工具,能够显著提高开发体验和性能[^1]。 ```bash npm create vite@latest my-vue-app --template vue cd my-vue-app npm install npm run dev ``` #### 2. Composition API 基础 Composition API 是 Vue3 中的核心改进之,它允许开发者通过逻辑关注点而不是组件生命周期来组织代码。`setup` 方法作为入口,提供了 `reactive`, `ref`, `computed`, `watch` 等核心方法[^1]。 - **Reactive**: 使用 `reactive` 定义响应式对象。 - **Ref**: 对单个值进行响应式处理。 - **Computed**: 计算属性用于派生数据。 - **Watch**: 监听状态的变化并执行副作用。 ```javascript import { reactive, computed, watch } from 'vue'; export default { setup() { const state = reactive({ count: 0 }); const doubleCount = computed(() => state.count * 2); watch( () => state.count, (newVal) => console.log(`count changed to ${newVal}`) ); return { state, doubleCount }; } }; ``` #### 3. 响应式系统的升级 相较于 Vue2,Vue3 的响应式系统更加高效且灵活。通过 Proxy 替代 Object.defineProperty,实现了深层次的对象拦截和支持 Symbol 属性的监听[^1]。 #### 4. 自定义 Hook 函数 为了增强代码复用性和可维护性,Vue3 推荐使用自定义 Hook 来封装通用逻辑。Hook 名称通常以 `use` 开头,并具有清晰的功能描述[^3]。 ```javascript // useCounter.js import { ref, onMounted } from 'vue'; export function useCounter(initialValue = 0) { const counter = ref(initialValue); const increment = () => (counter.value += 1); const decrement = () => (counter.value -= 1); onMounted(() => console.log('Counter initialized')); return { counter, increment, decrement }; } ``` #### 5. Tree-Shaking 技术解析 Tree-shaking 是种优化技术,旨在移除未使用的代码片段,从而减小最终打包文件大小。Vue3 设计之初就考虑到了这需求,通过模块化的架构和静态导入/导出语句的支持,使得 Tree-shaking 成为可能[^2]。 ##### 实战配置建议 - 使用 Webpack 或 Vite 进行深度配置。 - 尽量采用按需加载的方式引入依赖项。 - 利用插件(如 `babel-plugin-component`)实现样式分离。 #### 6. 国际化支持 Vue3 结合 `vue-i18n-next` 插件提供强大的国际化解决方案。借助 Composition API,可以轻松管理多语言环境下的文本翻译[^4]。 ```html <template> <div> <h1>{{ t('auth.login') }}</h1> <button @click="showMessage">{{ t('common.confirm') }}</button> <!-- 切换语言 --> <select v-model="locale"> <option value="zh-cn">中文</option> <option value="en-us">English</option> </select> </div> </template> <script setup lang="ts"> import { useI18n } from 'vue-i18n'; const { t, locale } = useI18n(); function showMessage() { console.log(t('common.save')); } </script> ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值