Vue.js 2.3.0 Release 正式发布. sync 特性回归

简介: We have created a brand-new standalone guide for server-side rendering in Vue, it's a recommended read for all users. Also, the HackerNews demo has been updated to reflect the latest best practices.


原文链接: github.com

🚀 New


Server-Side Rendering Improvements


Note: We have created a brand-new standalone guide for server-side rendering in Vue, it's a recommended read for all users. Also, the HackerNews demo has been updated to reflect the latest best practices.


  • Now uses the data-server-rendered attribute to indicate server-rendered markup, making the output valid HTML.


  • template option now supports simple interpolation using the render context. This allows the template to be dynamic based on the data attached to the context by rendered components.
    See docs for more details.


  • New bundleRenderer option: runInNewContext
    Defaults to true, which preserves the original behavior.
    When set to false, the renderer will no longer re-execute the entire bundle in a new vm context for each render. Instead, only the function exported by the bundle will be called again. This greatly improves performance, but requires some changes in source code structure.
    See docs for more details.


  • New bundleRenderer option: clientManifest
    By passing the bundleRender a client webpack build manifest generated by vue-server-renderer/client-plugin, the renderer can infer the proper build assets that need to be preloaded (e.g. code-split async chunks, images, and fonts). When using together with the template option, <link rel="preload/prefetch"> and appropriate <script> tags will be injected automatically.
    See docs for more details.


  • vue-ssr-webpack-plugin is now deprecated, instead, it is now part of vue-server-renderer. It now also exposes two plugins - one for the server build and one for the client build.


var VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
var VueSSRClientPlugin = require('vue-server-renderer/client-plugin')复制代码


  • See docs for more details.


Async Component Improvements


  • Async component factories can now return an object of the following format:
const AsyncComp = () => ({
  // The component to load. Should be a Promise
  component: import('./MyComp.vue'),
  // A component to use while the async component is loading
  loading: LoadingComp,
  // A component to use if the load fails
  error: ErrorComp,
  // Delay before showing the loading component. Defaults to 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is provided and exceeded.
  timeout: 3000
})


  • Note that when used as a route component in vue-router, these properties will be ignored because async components are resolved upfront before the route navigation happens. You also need to update vue-router to 2.4.0+ if you wish to use the new syntax for route components.


Functional Component Improvements


  • Functional components can now omit the props option. All attributes will be automatically extracted and exposed as camelized props on context.props.
    Note when the props option is provided, it will retain the old behavior - i.e. only explicitly declared props will be extracted.


  • v-on listeners attached to a functional component will be exposed as context.listeners. This is simply an alias to context.data.on.
    Combined with the props change, functional components usage can be much cleaner:


const MyComp = {
  functional: true,
  render (h, { props, listeners }) {
    return h('div', {
      on: {
        click: listeners.click // proxy click listener
      }
    }, [
      props.msg // auto extracted props
    ])
  )
}


  • Functional components now also support the inject option. Injected properties are exposed as context.injections. (@Kingwl via #5204)


Other Improvements


  • .sync is back! However it now is simply syntax sugar that expands into a prop + listener pair, similar to v-model.
    The following


<comp :foo.sync="bar"></comp>


  • is expanded into:


<comp :foo="bar" @update:foo="val => bar = val"></comp>


  • For the child component to update foo's value, it needs to explicitly emit an event instead of mutating the prop:


this.$emit('update:foo', newValue)


  • Warnings now include component hierarchy traces.
  • Vue.config.errorHandler now also handles error thrown inside custom directive hooks (@xijiongbo via #5324)
  • Vue.config.errorHandler now also handles error thrown in nextTick callbacks.
  • New v-on modifier: .passive - adds the event listener with { passive: true }. (@Kingwl via #5132)
  • Props validation now supports type: Symbol.
  • style bindings now support using an Array to provide multiple (prefixed) values to a property, so the following would be possible (@fnlctrl via #5460):


<div :style="{ display: ["-webkit-box", "-ms-flexbox", "flex"] }">


  • An extended component constructor can now also be used as a mixin. (@ktsn via #5448)
目录
相关文章
|
4月前
|
JavaScript 前端开发 API
实用!最新的几个 Vue 3 重要特性提案
实用!最新的几个 Vue 3 重要特性提案
|
29天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
52 4
|
1月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
27 5
|
1月前
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
|
2月前
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
2月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
58 4
|
1月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
45 0
|
3月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
47 9
|
3月前
|
缓存 JavaScript 算法
卷不动也得继续学!紧跟vue3的步伐,再来get一波进阶新特性!
该文章深入讲解了Vue3的进阶新特性,包括`watchEffect`的使用、性能优化策略、Vite构建工具的优势以及全局API的变化等内容,帮助开发者更好地掌握Vue3的开发技巧。
卷不动也得继续学!紧跟vue3的步伐,再来get一波进阶新特性!
|
3月前
|
缓存 移动开发 JavaScript
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选
该文章全面总结了Vue.js的基本使用方法与高级特性,并介绍了Vue周边的重要插件Vuex和Vue-Router的使用技巧。
查漏补缺方为上策!!两万六字总结vue的基本使用和高级特性,周边插件vuex和vue-router任你挑选