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)
目录
相关文章
|
22天前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
35 11
|
6月前
|
JavaScript 前端开发 API
实用!最新的几个 Vue 3 重要特性提案
实用!最新的几个 Vue 3 重要特性提案
|
3月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
98 4
|
3月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
46 5
|
3月前
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
|
4月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
137 4
|
4月前
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
3月前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
82 0
|
5月前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
58 9
|
5月前
|
缓存 JavaScript 算法
卷不动也得继续学!紧跟vue3的步伐,再来get一波进阶新特性!
该文章深入讲解了Vue3的进阶新特性,包括`watchEffect`的使用、性能优化策略、Vite构建工具的优势以及全局API的变化等内容,帮助开发者更好地掌握Vue3的开发技巧。
卷不动也得继续学!紧跟vue3的步伐,再来get一波进阶新特性!

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    53
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    55
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    71
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62