Welcome to join us to learn and make progress together.
I will post the latest news and excellent articles as soon as possible.
Video on b standing video www.bilibili.com/video/BV1fa…
About release Time
You can look at the official schedule. Official schedule
Vue3 is currently in Beta, and the rest of it deals with stability issues. That said, there won’t be many improvements to the main Api. You said from the live broadcast that although there are many ideas, big changes will appear in 3.1 at the earliest. So the current version should be very different from the official version. It looks like there’s a good chance that Q2 will be released.
Mind maps
Vue3 Family bucket address
| Project | Status |
|---|---|
| vue-router | Alpha [Proposed RFCs] [GitHub] [npm] |
| vuex | Alpha, with same API [GitHub] [npm] |
| vue-class-component | Alpha [Github] [npm] |
| vue-cli | Experimental support via vue-cli-plugin-vue-next |
| eslint-plugin-vue | Alpha [Github] [npm] |
| vue-test-utils | Alpha [Github] [npm] |
| vue-devtools | WIP |
| jsx | WIP |
Gracefully manage source version
In order to be able to reference the vue3 source code in the test project and to upgrade gracefully in the next version update. I decided to use Git’s submodule feature for management
Git submodule introduce blog.csdn.net/guotianqing…
Initialize the submodule
git submodule add https://github.com/vuejs/vue-next source/vue-next
Copy the codeThe submodule contents are recorded in a.gitModules file
# Update module
git submodule init
# Update module
git submodule update --init --recursive
Copy the codeCompile source code
Install dependencies
## Modify the image
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
# # remove pupteer
Ignore downloading Chromium
yarn --ignore-scripts
Copy the codePackage compiled
yarn dev
Copy the codeHelloWorld
Classic API
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=".. /.. /source/vue-next/packages/vue/dist/vue.global.js"></script>
</head>
<body>
<div id='app'></div>
<script>
const App = {
template: ` `.data() {
return {
message: 'Hello Vue 3!! '}},methods: {
click() {
console.log('click .... '.this.message)
this.message = this.message.split(' ').reverse().join(' ')}}}let vm = Vue.createApp(App).mount('#app')
// console.log(vm)
</script>
</body>
</html>
Copy the codeComposite API
<! DOCTYPEhtml>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=".. /.. /source/vue-next/packages/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const { createApp, reactive,watchEffect } = Vue
const App = {
template: ` `.setup() {
const state = reactive({
message:'Hello Vue 3!! '
})
watchEffect(() = > {
console.log('state change ', state.message)
})
function click() {
state.message = state.message.split(' ').reverse().join(' ')}return {
state,
click
}
}
}
createApp(App).mount('#app')
</script>
</body>
</html>
Copy the codeBrowser breakpoint debugging
Install dependencies to compile the source code
Local files can be opened directly through the browser
You can try it with a click and then if you want to debug the source code you’ll find that the code is packaged and you can’t directly debug the source code with breakpoints
Add the SourceMap file
Add Sourcemap to the packaged code in order to see the source code in the browser and enable breakpoint debugging
Set the environment variable Windows
set SOURCE_MAP=true && yarn dev
Set environment variable MAC/Linux
export SOURCE_MAP=true && yarn dev
Copy the code
CompositionApi introduction
Alpha source code. In this article, we take a look at one of the most important RFC motion apis in version 3.0.
concept
CompositionAPI can be translated into composite API if only literally. It used to be called Vue function-based API, but I think it’s more descriptive now. Essentially, the CompositionAPI is designed to make it easier to implement combinations of logic.
Review of history
Vue2 if you want to achieve logical compliance in components, such as all button components to achieve shake, there are about three ways to choose:
- Mixins
- Higher- Order Components (aka HOCs)
- Renderless Components (Components that encapsulate logic based on Scoped slots/Scoped slots
But all three are not very ideal, there are major problems
- The template data source is not clear, such as mixin, it is difficult to tell where an attribute comes from just by looking at the template.
- Namespace conflict
- Performance issues. For example, HOC requires additional component logic nesting, resulting in unnecessary performance overhead.
But what I’m more concerned about is that I have to introduce other concepts to deal with the primitive programming behavior of combining logic. This, of course, is why many architects who switch from Java prefer React. Vue is the language that goes in laughing and comes out crying. Getting started seems easy enough to just look at HelloWorld and work, but as soon as you run into problems you need to introduce a new concept. It’s not as clean and natural as the React function or component.
motivation
Let’s look at it first
const App = {
template: ` `.data() {
return {
message: 'Hello Vue 3!! '}},methods: {
click() {
console.log('click .... '.this.message)
this.message = this.message.split(' ').reverse().join(' ')}}}let vm = Vue.createApp().mount(App, '#app')
Copy the codeOptions API source location
The classic Vue API can be summarized as the Options API, which can be understood as an API for declaring logic in a configuration based manner. What that means is basically defined. Think about vuE2’s HelloWorld as if it were just a few simple definitions to achieve functionality. I think that’s why vue is so popular and it’s really simple to describe general logic. Of course, this also has a lot to do with yu Dashen from designer origin. Don’t let CSS and HTML languages be completely definable code.
However, this expression can be problematic if the business logic is complex. Because once the logic is complicated and you can’t write it as a lump, you have to think about how to organize it, you have to think about extracting the common parts of the logic and thinking about reuse, otherwise it becomes very difficult to maintain. What are the three ways of reuse that have been mentioned in the previous article? On the one hand, it requires new concepts and on the other hand, the programming experience is really poor and there are performance issues.
The CompositionAPI was inspired (admittedly) by The React Hooks. Good things need to be learned from this and don’t look down on the chain. Using the function composition API, the association API can be extracted into a composition function that encapsulates the associated logic and returns the state that needs to be exposed to the component as a responsive data source.
In actual combat
Ok on the code, the first piece of logic is especially large logic mouse position listening logic
// A classic example of mouse position listening logic
function useMouse() {
const state = reactive({
x: 0.y: 0
})
const update = e= > {
state.x = e.pageX
state.y = e.pageY
}
onMounted(() = > {
window.addEventListener('mousemove', update)
})
onUnmounted(() = > {
window.removeEventListener('mousemove', update)
})
return toRefs(state)
}
Copy the codeWe also want to put together another piece of logic like the refresh time logic
function useOtherLogic() {
const state = reactive({
time: ' '
})
onMounted(() = > {
setInterval(() = > {
state.time = new Date()},1000)})return toRefs(state)
}
Copy the codeIn real life we can assume that these two logics are likely to be reused by many components, and think about how irrelevant you would be if you used mixin and hoc. But using the motion API, we just need to combine it and expose like this
const MyComponent = {
template: `<div>x:{{ x }} y:{{ y }} z:{{ time }} </div>`.setup() {
const {
x,
y
} = useMouse()
// Use with other functions
const {
time
} = useOtherLogic()
return {
x,
y,
time
}
}
}
createApp().mount(MyComponent, '#app')
Copy the codeIt’s… it’s… it’s… it’s… it’s… Welcome to star for complete examples
Full API Introduction
What are the basic apis for Vue3?
const {
createApp,
reactive, // Create a responsive data object
ref, // Create a responsive data object
toRefs, // Convert the reactive data object to a single reactive object
isRef, // Check whether a value is a reference type
computed, // Create the computed properties
watch, // Create a watch listener
// Lifecycle hooks
onMounted,
onUpdated,
onUnmounted,
} = Vue
Copy the codeSetup uses the entry to the Composition API
The setup function is executed after beforeCreate and before created
setup(props,context){
console.log('setup.... '.)console.log('props',props) // Component parameters
console.log('context',context) // Context object
}
Copy the code
Ok, you can actually match your original React Vue2 code.
reactive
The reactive() function takes a normal object and returns a reactive data object
const state = reactive({
count: 0.plusOne: computed(() = > state.count + 1)})Copy the codeRef and isRef
- Ref creates a responsive data object for the given value (specifically, the basic data type ini or string)
- IsRef is just trying to figure out if it’s a reactive data object generated by ref
First of all, there is an important concept called a Value wrapper. If you’re talking about a Java wrapper, you’ll remember the Java concept of a Wrapclass. We know that only value without reference to basic data types, it creates a problem to return a basic data type such as a string is unable to trace his status, so we need to speak basic data type packaging, it’s a bit like the useRef ReactHooks, but data source object itself is the response of the Vue packing type. All right, let’s look at an example to understand
// Define to create responsive data
const time = ref(new Date())
// Set the timer to test the data response
setInterval(() = > time.value = new Date(), 1000)
// Check whether a value is of response type
console.log('time is ref:', isRef(time))
console.log('time', time)
console.log('time.value', time.value)
// Let's take a look at the template and show it like this
template: `
Date is {{ time }}
`
Copy the codetoRefs
- ToRefs expands objects created by reactive as base types
// If toRefs are not used
const state = reactive({
count: 0.plusOne: computed(() = > state.count + 1)})return {
state
}
// Template rendering should be written like this
template: `
count is {{ state.count }}
plusOne is {{ state.plusOne }}
`
// Let's see if we use toRefs again
const state = reactive({
count: 0.plusOne: computed(() = > state.count + 1)})return {
...toRefs(state)
}
// Template rendering should be written like this
template: `
count is {{ count }}
plusOne is {{ plusOne }}
`
Copy the codeWatch defines the listener
There’s nothing new about this, okay
watch(() = > state.count * 2.val= > {
console.log(`count * 2 is ${val}`)})Copy the codeEffect side effect function
Reactive object modifications trigger this function
// Side effect function
effect(() = > {
console.log(The 'value has been modified.. ',state.count)
})
Copy the codeComputed attribute
const state = reactive({
count: 0.plusOne: computed(() = > state.count + 1)})Copy the codeA. life cycle Hooks
| Vue3 | Vue3 |
|---|---|
| beforeCreate | The setup (alternative) |
| created | The setup (alternative) |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| errorCaptured | onErrorCaptured |
Complete code implementation
Get an in-depth look at the source code through Jest
Now it’s time to move on to principle source. There’s a small problem we need to take care of first. Just figuring out how to get the Vue3 unit test running. After all, reading code without running it is soulless. Skew the Chinese fans are not just watching.
The Vue3 code is tested against Jest. Let’s take a quick look at what is Jest
Jest profile
Jest is a dedicated Javascript unit testing tool for Facebook. It is suitable for JS, NodeJS, zero configuration, built-in code coverage, powerful Mocks and other features.
In short, at present, Jest is a set of relatively system testing tools. Why is that? For example, if you compare Mocha to the previous testing framework, which was just a testing framework, if you need assertions you need a specialized assertion library like Assert, shoud, Expect, etc., and if you need mocks you need their own libraries to support them. But Jest can be done almost all at once.
Directory file Name Convention
Jest test code and logic code is convention over configuration, which is generally accepted in the programming world today.
The test code for Jest is based on the following convention
- The test file name should be a spec result
- The test file suffix is JS, JSX, TS, and TSX
- The test file needs to be in the tests/unit/ directory or /tests/ directory
As long as the test file meets these three requirements, it will be automatically executed when using jEST.
This is similar to Maven’s convention for test code and logic code except that the test directory is changed to __tests__
Let’s take a look at the directory structure of the Vue3 source code in detail
So, it’s a little bit easier to put the logical code and the test code together. Let’s look at another package, reactive
Run full tests
Jest is configured in the package.json file
npm run test
Copy the code
coverage
We added a parameter to get the coverage out
npx jest --coverage
Copy the code
In fact, there was a mistake in running coverage so let’s just leave that alone and let’s just parse this report for a second how do you look at it, if you’ve studied software engineering you know that in general the theory of coverage is covered, right
- Statement coverage
- The node coverage
- Path coverage
- Conditional combination coverage
But in general, different frameworks understand different things and in the case of Jest, it’s sort of broken down like this
- % STMTS is statement coverage: Is every statement executed?
- %Branch Branch coverage: Is every if block executed?
- %Funcs function coverage: Is every function called?
- %Lines Line coverage: Is every line executed?
Run a separate test
For example, let’s look at vue’s index test
There are two ways to test separately
// Install globally
npm i jest -g
jest index
// Or even easier
npx jest index
Copy the code
import { createApp } from '.. /src'
it('should support on-the-fly template compilation'.() = > {
const container = document.createElement('div')
const App = {
template: `{{ count }}`.data() {
return {
count: 0
}
}
}
createApp().mount(App, container)
/ / assertions
expect(container.innerHTML).toBe(` 0 `)})Copy the codeIt says that in order to make sure that the template compilation works, this is a simple data binding and the last assertion is to see if the count is zero. So in this case, except for the assertion part, it actually works by copying directly into that HTML file that WE saw in the first lecture.
Reactive unit tests
npx jest reactive --coverage
Copy the code
After that we can start to enter the source code
The code structure
-
The compiler
-
Compiler-core Specifies the core compilation logic
- Basic type resolution
- AST
-
Compiler-dom is the compiler logic for the browser
- v-html
- v-text
- v-model
- v-clock
-
-
Runtime environment
- Runtime-core Specifies the runtime core
- inject
- The life cycle
- watch
- directive
- component
- Runtime – DOM Runtime logic for browsers
- class
- style
- Running-test Indicates the simulation of the test environment
It is easier to test logic that is primarily designed to solve unit testing problems out of the browser
- Runtime-core Specifies the runtime core
-
Reactivity Reactive logic
-
The Template-Explorer template parser can run like this
yarn dev template-explorer Copy the codeThen open index. HTML
-
Vue Code entry
Integrate the compiler and runtime
-
Server -renderer
-
Share Common method
Then open index. HTML
Comparison of response modes between Vue2 and Vue3
What is the Vue2 response
First, let’s talk about what a response is. There’s some way that you can get to the point where the data changes and you can freely define the corresponding response and that’s called a response.
The specific need for our ViewModel in MVVM is that the data changes and the view needs to respond. This is the case with the Jest use case
it('Test whether data changes are responded to'.() = > {
const data = reactive({
name: 'abc'.age: {
n: 5}})Mock a response function
const fn = jest.fn()
const result = fn()
// Set the response function
effect(fn)
// Change the data
data.name = 'efg'
// Confirm that fn is valid
expect(fn).toBeCalled()
})
Copy the codeLet’s say that what we want is data and when data changes we can trigger the FN function which is the corresponding function, which usually triggers the view update or it may not. We have made a Mock function with jest to check if the corresponding function is made.
Finally, the code expect(fn).tobecalled () is effective, which means that the test is passed, which is made accordingly
Vue2 solution
The following shows that vuE2 is implemented by redefining getter and setter methods using object.defineProperty.
let effective
function effect(fun) {
effective = fun
}
function reactive(data) {
if (typeofdata ! = ='object' || data === null) {
return data
}
Object.keys(data).forEach(function (key) {
let value = data[key]
Object.defineProperty(data, key, {
emumerable: false.configurable: true.get: () = > {
return value
},
set: newVal= > {
if(newVal ! == value) { effective() value = newVal } } }) })return data
}
module.exports = {
effect, reactive
}
Copy the codeOf course, there are two important issues that need to be addressed. The first is that you can only do the shallow response if you do the second layer.
it('Tests whether changes in multiple layers of data are responded to'.() = > {
const data = reactive({
age: {
n: 5}})Mock a response function
const fn = jest.fn()
// Set the response function
effect(fn)
// Change multiple layers of data
data.age.n = 1
// Confirm that fn is valid
expect(fn).toBeCalled()
})
Copy the codeFor example, in the following use case, the solution is to have recursive calls
And, of course, there’s also a huge performance cost to recursion that you keep in mind.
And then we have the array problem which we can solve by hijacking functions
const oldArrayPrototype = Array.prototype
const proto = Object.create(oldArrayPrototype);
['push'.'pop'.'shift'.'unshift'.'splice'.'sort'.'reverse'].forEach(method= > {
// Function hijacking
proto[method] = function(){
effective()
oldArrayPrototype[method].call(this. arguments) } })// Arrays provide responses through data hijacking
if(Array.isArray(data)){
data.__proto__ = proto
}
Copy the codeVue3
The new version of Vue3 uses ES6’s Proxy approach to solve this problem. The two previous problems were much simpler. First of all, Proxy supports arrays so you don’t have to do any special code for arrays. There is no need to use recursion for deep listening. When get is an object, the object can be processed in a reactive manner and returned. If you think about it it’s not at initialization time it’s at setup time and of course it’s a big performance boost.
function reactive(data) {
if (typeofdata ! = ='object' || data === null) {
return data
}
const observed = new Proxy(data, {
get(target, key, receiver) {
// Reflect returns a value with no error
let result = Reflect.get(target, key, receiver)
// Multilayer agents
return typeofresult ! = ='object' ? result : reactive(result)
},
set(target, key, value, receiver) {
effective()
// proxy + reflect
const ret = Reflect.set(target, key, value, receiver)
return ret
},
deleteProperty(target,key){
const ret = Reflect.deleteProperty(target,key)
return ret
}
})
return observed
}
Copy the codeOf course, there are pros and cons, such as compatibility issues, currently IE11 does not support Proxy. However, it is not a matter of believing that full support for ES6 is irreversible.
To compare and understand the difference between the responsive implementations of Vue2 and vu3, I have written both implementations together with the JEST test. We can refer to github.com/su37josephx…
// cloneCode YARN NPX jest reactivity-demoCopy the code
Custom renderer
This custom renderer is similar to React’s Render. A variety of renderers can be defined as needed
- Vue – Native App side
- There should be many such libraries on the applet side
- WebGL vugel. Planning. Nl / # applicatio…
Specific content will be updated recently
New tool vite
We know that import is fully available in the browser in ES6 syntax. It can be used to load backend resources but it’s a feature we’ve been ignoring. Maybe webPack is so good. We’ve been ignoring his existence. Vite takes advantage of this feature, but takes it one step further by providing support for vue files. But maybe it’s a little edgy.
- Simple Http server
- Without webpack
- Vue files are rendered directly
- Hot update