Vue's advanced level (yi229): a preliminary study of vue3

No Silver Bullet 2020-11-13 07:29:07
vue advanced level yi229 yi


Vue2 In the process of continuous updating ,Vue3 It's about to come out , at present Vue The official website has shown Vue3 stay beta Progress . Let's talk about Vue3 Some new features of .

practice

upgrade Vue 3.0 project

Currently created Vue 3.0 The project needs to go through Plug-in upgrade The way to achieve ,vue-cli There is no direct support for , We go into the project catalog , And enter the following command to upgrade .

cd vue-next-test
vue add vue-next

Constant point

  • Template syntax remains unchanged
  • No need to use TypeScript
  • No, Class API
  • Optional declaration components remain
  • There will be special support IE11 Version of
  • Most component libraries can continue to use
  • Most of the existing code can continue to be used
  • Most of the accumulated knowledge has not expired
  • The old system can also get some support

New characteristics

  • Faster and less
  • Completely TypeScript restructure
  • Composition API
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here
     Insert picture description here

1.1 Faster and less

Object.defineProperty > Proxy
  • There is no need to traverse and modify the original object
  • Can completely cover the object / Array operation
  • It can cover more data types
  • More accurate observation , Less consumption
  • Native API, Speed super fast
  • Half the memory , Double the speed
  • restructure Virtual DOM
  • The generated code is easier to be JS The engine understands 、 Optimize
  • A combination of motion and stillness , Accurate compilation and re rendering of dynamic parts
  • Optimize <slot> Generate ( Compile as function by default )
  • Support tree-shaking, Effectively reduce the packing volume
  • Speed up 6 times
  • You can say goodbye to Time slicing
  • Support larger scale applications
  • The compiled code is as concise as possible

1.2 Completely TypeScript restructure

  • Give Way Vue Development teams are more relaxed
  • The architecture is more flexible , It's easier to read the source code
  • Can be used independently Vue Internal modules
  • IDE Support better

1.3 Composition API

 Insert picture description here

Summary : take 2.x The options related to component logic in the API The form of function is redesigned .
Name used before :Vue Function-based API
Instead of the earlier Class API
The copyright belongs to the author .
Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .
link :http://caibaojian.com/welcome-vue3.html
source :http://caibaojian.com

Vue 2 The problem with object-oriented components

  • It's hard to reuse logical code
  • It's hard to split very large components
  • Code can't be optimized / Compress
  • It's difficult to deduce data types

Composition API How to solve these problems

  • Pure function , convenient JS The runtime understands
  • Easy to finish tree-shaking
  • The code of a single component can be integrated together
  • Between different components , You can deconstruct and rename objects to avoid namespace conflicts
    The copyright belongs to the author .
    Commercial reprint please contact the author for authorization , Non-commercial reprint please indicate the source .
    link :http://caibaojian.com/welcome-vue3.html
    source :http://caibaojian.com

Upgrade strategy

Provide compatible and standard versions

  • In compatible versions ,setup() priority of use
  • Some properties can be retained , such as template
  • data 、 Method 、 Life cycles will be abandoned
  • Developers can gradually upgrade the code to the new version

Use Composition API

 Insert picture description here
 Insert picture description here

Why? Vue 3.0 To do this

  • UI Language , It needs to be very expressive
  • UI Components , The most common requirement is “ Combine ”
  • Be able to give optimization to JavaScript Runtime
  • Can be compatible with the old version

“ When making tax laws , You can use a linear tax rate , You can also use progressive tax rates . Evaluate which tax system is fairer , It depends on people with different income levels , Who pays more tax . Design API Also similar , It depends on which developers need to face more complex issues .

As API The designer , Our goal is different from the planners of the tax system : We want to tax as little as possible , Not more taxes .

therefore , If 90% Of users can stay in the low tax stage , Only 10% We need to pay more taxes , in my opinion , It's much better than sharing the tax burden .

Because of that ,Vue Of API yes “ layered ” Of : Templates and objects API It can meet most of the use scenarios , Well done , It only requires users to invest a small amount of learning time .Composition API And render functions need “ Pay more taxes ”, But only a few developers need to pay for it , And they will also get more from the system .

1.4 Other improvements

  • Components can have multiple root nodes (<fragment>
  • v-model Support multiple attributes
  • Support <portal> Render the subtree elsewhere
  • You can customize the render function , Easy to extend to other platforms
  • Added to the overall picture API The namespace of
  • take props Become optional
  • Custom command added beforeUnmount

1.5 Some changes

  • Render function changes
  • Asynchronous components need to use createAsyncComponent
  • Unify common slots and scope slots
  • Dynamic parameters are supported in the instruction

1.6 Some remove

  • inline-template
  • filters
  • In event binding keyCode
  • Functional components are no longer supported , Please switch to pure rendering function
  • remove v-bind Medium .sync Modifier

The way to deal with it

  • reading comprehension RFC:https://github.com/vuejs/rfcs
  • Read the source code :https://github.com/vuejs/vue-next
  • Study TypeScript
  • Using unit tests /E2E Test and arm yourself
  • Upgrade slot to v-slot
  • Study Composition API
  • Experience the latest version ahead of time
  • Build your own knowledge system
  • Understand the author's design ideas
  • Read more, listen more and write more

notes

  1. Vue.js The documentary 《Vue.js: The Documentary
  2. Official tool chain  Insert picture description here
  3. Excellent component library
     Insert picture description here
     Insert picture description here
  4. Upper frame
     Insert picture description here
  5. Mobile solutions (H5/Hybrid)
     Insert picture description here
     Insert picture description here
版权声明
本文为[No Silver Bullet]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple