SegmentFault Technology Weekly -- A collection of super practical Vue, please check

Vue.js is a tool for creating web interfaces. Its characteristics are

Simple HTML template + JSON data, and then create a Vue instance, it's that simple.
Data-driven Automatically track dependent template expressions and computed properties.
Componentization Use decoupled, reusable components to construct interfaces.
Lightweight ~24kb min+gzip, no dependencies.
Fast Precise and efficient asynchronous batch DOM updates.
Module-friendly Install via NPM or Bower and integrate seamlessly into your workflow.

`热门文章`

Since this way of writing Vue code is relatively new, you might be wondering what are the best practices for writing composable functions? This series of tutorials can serve as a reference guide for you and your team as you work on composable development.
We will cover the following:
1. How to make your composition more configurable with options object parameters; 👈 This topic
2. Use ref and unref to make our parameters more flexible;
3. How to make your return value more useful;
4. Why starting with an interface definition can make your composable functions more powerful;
5. How to use async code without "await" - makes your code easier to understand;
First, though, we need to make sure our understanding of compositional functions is consistent. Let's take a moment to explain what a composition function is.

"Summary of Vue3.2 setup syntactic sugar"

Tip: Vue3.2 version can only use syntactic sugar!
In Vue3.0, the variable must be returned before it can be used in the template; in Vue3.2, only the setup attribute needs to be added to the script tag, and the template can be used directly without return, which is very fragrant!

"How to pass data across hierarchical components in Vue.js 3.x? 》

In Vue.js , if a cross-level component wants to pass data, we can directly use props to pass the data of the ancestor component to the descendant component:

Note: The picture above is from Vue.js official website: Prop Drilling .

As shown above, the intermediate component <Footer> may not need this part at all props , but in order to <DeepChiild> can access these props <Footer> still need to define these props and pass it on.

Some people say that we can use $attrs/$listeners , but we still have to go through the middle level, and using Vuex is too troublesome, Event Bus and it is easy to cause logical dispersion and problems. difficult to locate.

So, is there any other way to pass data directly from ancestor component to descendant component? The answer is provide/inject .

ancestor component

"Vue.js 3.x two-way binding principle"

Without further ado, let's take a look at a basic example of v-model:
<input type="text" v-model="search">
First of all, we need to understand one thing: the essence of v-model is an instruction. Therefore, it is the same as our general custom directive and needs to implement the hook function of the Vue.js life cycle.
Second, v-model implements two-way binding, that is: one-way flow of data to DOM, and one-way flow of DOM to data.
Understand the above two points, and then look at the code will be much clearer.

"Sharing 15 Pit Avoidance Experiences in Vue3 Family Bucket Development"

Recently, I started Vue3 and completed 3 projects. I encountered a lot of problems. I will take some time to sort it out today and share 15 more common problems with you. Basically, the corresponding document addresses are posted. Please read more documents~
The three completed projects are basically developed using Vue3 (setup-script mode), so they are mainly summarized in several aspects:
vue3
Vite
VueRouter
Pinia
ElementPlus

"Through the Differentiated Contrastive Learning Method, Take You to Review Vue2 and Quickly Master Vue3"

Vue3 has been released for some time, and it has also been supported by major manufacturers and communities and loved by many developers. The surrounding ecology is also gradually improving. It is a thriving landscape. This article aims to help you quickly master Vue3 by sorting out the common APIs of Vue2 and comparing Vue3 through differentiation
This article assumes that you already have some Vue2 practical experience, and will not describe too much api details

"Analysis of petite-vue source code - two-way binding v-model "

双向v-model可编辑HTML元素( select , input , textarea [contenteditable=true] ) v-bind b63b59d83f0d75b17bcb6e71f6a49e2e---和v-on ，而且还能利用通过petite-vue附加给元素的_value 、 _trueValue _falseValue x attribute provides the ability to store non-string values.

How does Vue3 implement global exception handling? 》

When developing component libraries or plug-ins, global exception handling is often required to achieve:
Global unified handling of exceptions;
Prompt error messages for developers;
Program downgrade processing and so on.
So how to achieve the above function?
This article first briefly implements an exception handling method, then combines the implementation in the Vue3 source code in detail, and finally summarizes several cores for implementing exception handling.
The Vue3 version of this article is 3.0.11

"Vue Responsive Principles"

One of the most unique features of Vue is its non-intrusive response system. Data models are just plain JavaScript objects. And when you modify them, the view updates. When it comes to Vue's responsive implementation principle, many developers know that the key to implementation is to use Object.defineProperty , but how to implement it specifically, let's find out today.

`热门问答`

`推荐课程`

[Sifu Programming] Welcome to Vue 3.0

Introduction:

What's new in Vue 3.0
Design thinking of the development team (why there are these changes)
how should we prepare

PS: What technical content do you want to see, you can leave a message in the comment area~
If you have any questions, you can add Ms. WeChat~

SegmentFault Technology Weekly -- A collection of super practical Vue, please check

`热门文章`

`热门问答`

`推荐课程`

Beverly

引用和评论

2024 百度万象大会举办：大模型全面重构百度移动生态，让智能体人人可用