// Composable const useBurger = () => { const lettuce = ref(true); const ketchup = ref(true); return { lettuce, ketchup, }; };
// Component setup() { // We can destructure but still keep our reactivity const { ketchup } = useBurger(); watchEffect(() => console.log(ketchup.value)); return { ketchup, removeKetchup: () => ketchup.value = false }; },
If you don't want to destructure the values, you can always wrap it in reactive and it will be converted to a reactive object: // Component setup() { // Wrap in `reactive` to make it a reactive object const burger = reactive(useBurger()); watchEffect(() => console.log(burger.ketchup)); return { burger, removeKetchup: () => burger.ketchup = false }; },
One great thing VueUse does is return a single value by default. If you happen to need more granular control, you can pass in an option to get an object returned instead: import { useTimestamp } from '@vueuse/core'; // Most of the time you only need the timestamp value const timestamp = useTimestamp(); // But sometimes you may need more control const { timestamp, pause, resume, } = useTimestamp({ controls: true });
I think presenting different interfaces based on how you need to use the composable is a brilliant pattern. This makes it simpler to work with while not sacrificing any precise control. 🔥 Mixing local and global styles together Normally, when working with styles we want them to be scoped to a single component: <style scoped> .component { background: green; } </style>
In a pinch though, you can also add a non-scoped style block to add in global styles if you need it: <style> /* Applied globally */ .component p { margin-bottom: 16px; } </style> <style scoped> /* Scoped to this specific component */ .component { background: green; } </style>
Be careful, though — global styles are dangerous and hard to track down. Sometimes, though, they're the perfect escape hatch and precisely what you need. 🔥 v-once If you've got large chunks of static or mostly static content, you can tell Vue to (mostly) ignore it using the v-once directive: <template> <!-- These elements never change --> <div v-once> <h1 class="text-center">Bananas for sale</h1> <p> Come get this wonderful fruit! </p> <p> Our bananas are always the same price — $ each! </p> <div class="rounded p-4 bg-yellow-200 text-black"> <h2> Number of bananas in stock: as many as you need </h2> <p> That's right, we never run out of bananas! </p> </div> <p> Some people might say that we're... bananas about bananas! </p> </div> </template>
This can be a helpful performance optimization if you need it. The v-once directive tells Vue to evaluate it once and never update it again. After the initial update it's treated as fully static content. Here are the docs for v-once. 🎙️ #016 — The Future of Vue.js (with Evan You) In this episode of DejaVue, Michael and Alex continue their conversation with Evan You, covering the future of Vue.js. They discuss plans for Vue 4, improvements in Vue 3.5, and various new features and improvements. Topics include native CSS scoping, TypeScript by default, and the possibility of removing the need for declaring props. Watch on YouTube or listen on your favourite podcast platform. Chapters: In case you missed them: 📜 Compressing Images with Vite and VSharp Images are one of the biggest causes of slow webpages. We have a bunch of strategies for dealing with this, but the most basic one is to make sure each and every image in your app is compressed as much as possible. Fortunately for us, setting up Nuxt to automatically compress our images only takes a few minutes. Check it out here: Compressing Images with Vite and VSharp 📜 Auth in Nuxt 3: Protecting Server Routes in Nuxt 3 with Supabase (4 of 4) It's not great to leave our API endpoints unprotected, even if all of our routes are secure. Thankfully, protecting our server routes doesn't require a lot of code from us. In this fourth article of the series, we'll go over how to protect your backend server routes using auth. Check it out here: Auth in Nuxt 3: Protecting Server Routes in Nuxt 3 with Supabase (4 of 4) 📅 Upcoming Events Here are some upcoming events you might be interested in. Let me know if I've missed any! PragVue 2024 — (September 17, 2024) The first Czech Vue.js conference, taking place in Cinema City - Nový Smíchov Check it out here Vuejs.de Conf — (October 8, 2024 to October 9, 2024) A community-driven Vue conference in Germany. Listen to great talks from great speakers and meet the wonderful VueJS Community. Check it out here Vue Fes Japan 2024 — (October 19, 2024) Check it out here VueConf Toronto 2024 — (November 18, 2024 to November 20, 2024) My favourite Vue conference, in my own backyard! A three-day event with workshops, speakers from around the world, and socializing. Check it out here 💬 Creating complexity "The purpose of software engineering is to control complexity, not to create it." — Unkown 🧠 Spaced-repetition: How to watch anything in your component The best way to commit something to long-term memory is to periodically review it, gradually increasing the time between reviews 👨🔬 Actually remembering these tips is much more useful than just a quick distraction, so here's a tip from a couple weeks ago to jog your memory. It took me a very long time to realize this, but anything in your component that is reactive can be watched. This includes computed refs as well: const first = ref('Michael'); const last = ref('Thiessen'); const fullName = computed(() => `${first.value} ${last.value}`); watchEffect(() => console.log(fullName.value));
Maybe it's just me, but for some reason this wasn't all that intuitive at first for me. With the Options API it looks like this: export default { computed: { someComputedProperty() { // Update the computed prop }, }, watch: { someComputedProperty() { // Do something when the computed prop is updated } } };
| 
评论
发表评论