深入了解vue——详谈vue3中的setup hooks

玖玖passion
243 阅读3分钟

前言

面试官为了考察我们是否真正掌握了vue,经常会问setup这个问题,稍微一不注意就很容易丢大分,为了回答得更加的完美我决定好好写一篇文章来梳理梳理！！

setup 语法糖

熟悉vue的话很容易看出setup语法糖是有多么的完美。我们看下下面的代码来感受下,没有setup的vue2是怎么样子的。

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: '欢迎来到我的组件',
      content: '这是一个使用 Vue 2 创建的简单组件。'
    };
  },
  methods: {
    greet() {
      alert('你好，Vue 世界！');
    }
  }
};
</script>

我们可以清楚的看到name 属性是一个可选的选项，用于给组件指定一个名称。这个名称主要用于调试和递归调用。在一个组件内部递归地调用自身，必须给组件指定一个名称。如果组件没有名称，Vue 会默认显示为 <Anonymous> 或 <Unknown>，这不利于调试。data 函数用于定义组件的响应式数据。我们也可以看到data()里边需要将title,content这些数据返回给模板。methods 是一个对象，其中的键是方法名，值是对应的函数(greet就是一个方法,alert是该函数)。这些方法可以访问组件的数据、计算属性、其他方法等，并且可以在模板中通过事件处理器调用。 好啦！！以上就是对vue2的简单剖析,我们可以看看有setup语法糖的vue3吧！！

<script setup>
import { ref } from 'vue';
import MyComponent from './components/MyComponent.vue';

// 定义响应式数据
const title = ref('欢迎来到我的应用');
const content = ref('这是一个使用 Vue 3 和 <script setup> 创建的应用。');
const message = ref('来自父组件的消息');

// 定义方法
const greet = () => {
  alert('你好，Vue 世界！');
};

const changeTitle = () => {
  title.value = '标题已更改';
};

// 计算属性
const computedMessage = computed(() => {
  return `计算属性: ${message.value}`;
});

// 监听器
watch(title, (newVal, oldVal) => {
  console.log(`标题从 "${oldVal}" 变为 "${newVal}"`);
});
</script>

首先呢Vue 3 引入了 <script setup> 语法，这是一种新的、更简洁的方式来编写组合式 API 代码。<script setup> 是 Vue 3 单文件组件（SFC）中的一种语法糖，它使得组件的编写更加直观和简洁。 它的特点让vue3更加简洁明了。特别容易上手,它有如下几个特点:

  1. 自动暴露：在 <script setup> 中定义的顶级变量、函数和导入的模块会自动暴露给模板，无需显式返回。
  2. 简洁：减少了样板代码，使得组件逻辑更加清晰。
  3. 组合式 API：完全支持 Vue 3 的组合式 API，如 ref、reactive、computed、watch 等。
  4. 编译时优化：编译器会对 <script setup> 进行优化，提升性能。

经过对比我们不难看出来vue3不像vue2那样不用写data()函数不用return 数据给模板,而是自动暴露！！太简洁了！！我们也不难发现data()函数里边的数据自动就是响应式,而vue3中的数据要通过ref或者reactiv来定义。由此可见vue2是全部导入的,性能不佳。而vue3是按需导入的,当需要ref的时候就直接import 导入。这样极大的避免了资源浪费,大大提高了效率！！

hooks函数

个人认为呢vue3比react更好用,react里边有的呢vue3也慢慢支持了！vue3也支持hooks函数编程,我可以将一些业务逻辑封装为一个个hooks函数到时候按需引入就行！而且还大大增加了复用性。一个函数可以在多个地方复用！！我的组件只需要负责渲染页面就行。业务逻辑交给hooks,这种抽丝剥茧下我的代码性能和美观度大大提升了,我下次检查我修改的时候特别方便！！

总结

希望自己的代码能力越来越强,对框架语言有更清晰的认识！早点去实习~~

avatar
文章
阅读
粉丝