vue3新增功能（vue3.0新特性有哪些）

本文目录

• vue3.0新特性有哪些
• （十八）补充-Vue3中插槽的使用
• 前端怎么在vue3里面添加查询功能在数据库显示
• vue-cli3.0增加了哪些新特效
• vue3教程

vue3.0新特性有哪些

Evan You（尤雨溪）在2018年11月16日）早上在 Vue Toronto 的主题演讲中预演了 Vue 3 。利用现代浏览器支持的新功能，Vue 3 将成为我们已经了解和喜爱的 Vue.js 强大的的改进版本。
总结起来，Vue 3 以下方面值得我们期待 ：
更快
更小
更易于维护
更多的原生支持
更易于开发使用
更快：
重写虚拟DOM (Virtual DOM Rewrite)
随着虚拟 DOM 重写，我们可以期待更多的编译时（compile-time）提示来减少 运行时（runtime）开销。重写将包括更有效的代码来创建虚拟节点。
优化插槽生成(Optimized Slots Generation)
***隐藏网址***
静态树提升(Static Tree Hoisting)
使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。
静态属性提升（Static Props Hoisting）
此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。
基于 Proxy 的观察者机制
目前，Vue 的反应系统是使用 Object.defineProperty 的 getter 和 setter。 但是，Vue 3 将使用 ES2015 Proxy 作为其观察者机制。 这消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。
为了继续支持 IE11，Vue 3 将发布一个支持旧观察者机制和新 Proxy 版本的构建。
更小：
Vue已经非常小了，在运行时（runtime）压缩后大约 20kb 。 但我们可以期待它会变得更加小，新的核心运行时压缩后大概 10kb 。 这将在很大程度上通过消除不使用的库(也称为Tree Shaking)来实现。 例如，如果您没有使用 过渡（transition）元素，则不会包含它。
更具可维护性：
虽然大多数 Vue 开发人员都没有在库本身上工作，但很高兴知道 Vue 3 将带来更多可维护的源代码。 它不仅会使用 TypeScript ，而且许多软件包将被解耦，使所有内容更加模块化。
更多的原生支持
运行时内核也将与平台无关，使得 Vue 可以更容易地与任何平台（例如Web，iOS或Android）一起使用。
更易于开发使用
Observer 模块已被解压缩到自己的包中，允许您以新的方式使用它
跟踪重新渲染的位置也会更容易。 在 Evan 的演讲中，他做了一些实时编码，并展示了如何跟踪 Vue 应用程序（使用下面的代码）来找出触发组件重新渲染的内容。 这在更大的应用程序和性能微调中非常有用。
Vue 3.0 还会改进对 TypeScript 的支持，允许在器中进行高级的类型检查和有用的错误和警告。
实验性的 Hooks API
当我们需要在 Vue 中共享两个组件之间的行为时，我们通常使用 Mixins 。然而，Evan 正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题，并且更适合使用惯用的 Vue 代码。
实验性的 Time Slicing 支持
当您有许多组件同时尝试重新渲染时，任何浏览器都可以开始变得很慢，从而使用户体验下降。
Evan展示了他如何尝试使用 Time Slicing，将 JS 的执行分解为几个部分，如果有用户交互需要处理，这些部分将提供给浏览器。

（十八）补充-Vue3中插槽的使用

vue3中的插槽是在用的时候和vue2的区别略有不同，常见插槽使用中主要体现在具名插槽上。
1、vue3中新增了v-slot来代替vue2中的slot等属性。
2、在普通插槽中使用：

结果会将el-table的内容渲染到组件模板中的el-main中。它还有另一种写法：

此种写法就是vue3中新增的插槽指令，它还有另一种写法：

此种写法类似于v-on简写于@，v-bind简写于：,v-slot也有简写：#。
3、在具名插槽中使用，
可以通过给v-slot指令增减一个参数名称来指定具体的某一个插槽（具有name属性的插槽）

在此组件中就包含了已给匿名插槽以及，name分别为"top-left","top-right","bottom"的三个具名插槽。

那么我们在使用的时候直接使用插槽的简写来对指定的插槽指定要渲染的内容。

下一章： （十九）setup 语法糖应用
上一章： （十七）Vue3.x使用provide/inject来代替vuex的实现方式

ps： 未经他人事，勿劝他人善！

前端怎么在vue3里面添加查询功能在数据库显示

前端在vue3里面添加查询功能在数据库显示为：
1、必须使用一些后端框架（如Node.js）来构建服务器，并使用数据库（如MySQL）来存储数据。
2、在Vue3中，使用axios或fetch来发送HTTP请求，从服务器获取数据库中的数据。
3、在Vue3中，使用查询参数（如关键字）来设置请求参数，从而进行查询操作。
4、在服务器端使用SQL语句根据查询参数进行查询，并将查询结果返回给Vue3，从而在Vue3中完成数据库查询。

vue-cli3.0增加了哪些新特效

这次给大家带来vue-cli3.0增加了哪些新特效，vue-cli3.0新特效的注意事项有哪些，下面就是实战案例，一起来看一下。
最近的开发项目中使用了vue-cli 3.0，使用体验可以说非常棒了，模板更加制定化，配置更加简洁。以下总结下应用过程中的一些经验。
新建项目
# 安装
npm install -g @vue/cli
# 新建项目
vue create my-project
# 项目启动
npm run serve
# 打包
npm run build打包后的文件，对引用资源注入了预加载（preload/prefetch），启用 PWA 插件时注入 manifest/icon 链接，并且引入(inlines) webpack runtime / chunk manifest 清单已获得最佳性能。
功能配置
功能选择
3.0 版本包括默认预设配置 和 用户自定义配置，在用户自定义配置之后，会询问是否保存当前的配置功能为将来的项目配置的预设值，这样下次可直接使用不需要再次配置。
自定义功能配置包括以下功能：
TypeScript
Progressive Web App (PWA) Support
Router
Vuex
CSS Pre-processors
Linter / Formatter
Unit Testing
E2E Testing
可以根据项目大小和功能体验配置不同的功能，空格键 选中/反选，按a键 全选/全不选，按i键反选已选择项， 上下键 上下移动选择。
功能细节配置
在选择功能后，会询问更细节的配置，
TypeScript：
是否使用class风格的组件语法：Use class-style component syntax?
是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?
CSS Pre-processors：
选择CSS 预处理类型：Pick a CSS pre-processor
Linter / Formatter
选择Linter / Formatter规范类型：Pick a linter / formatter config
选择lint方式，保存时检查/提交时检查：Pick additional lint features
Testing
选择Unit测试方式
选择E2E测试方式
选择 Babel, PostCSS, ESLint 等自定义配置的存放位置 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
vue.config.js 自定义配置
vue.config.js完整默认配置
module.exports = {
// 基本路径
baseUrl: ’/’,
// 输出文件目录
outputDir: ’dist’,
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
***隐藏网址***
compiler: false,
// webpack配置
***隐藏网址***
chainWebpack: () =》 {},
configureWebpack: () =》 {},
// vue-loader 配置项
***隐藏网址***
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require(’os’).cpus().length 》 1,
// 是否启用dll
***隐藏网址***
dll: false,
// PWA 插件相关配置
***隐藏网址***
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === ’darwin’,
host: ’0.0.0.0’,
port: 8080,
***隐藏网址***
hotOnly: false,
proxy: null, // 设置代理
before: app =》 {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}设置代理
# string
module.exports = {
devServer: {
proxy: ’《url》’
}
}
# Object
module.exports = {
devServer: {
proxy: {
’/api’: {
target: ’《url》’,
ws: true,
changeOrigin: true
},
’/foo’: {
target: ’《other_url》’
}
}
}
}启用dll
启用dll后，我们的动态库文件每次打包生成的vendor的值就会一样，其值可以是 true/false,也可以制定特定的代码库。
module.exports = {
dll: true
}
module.exports = {
dll: [
’dep-a’,
’dep-b/some/nested/file.js’
]
}静态资源路径
相对路径
静态资源路径以 @ 开头代表 《projectRoot》/src
静态资源路径以 ~ 开头，可以引入node modules内的资源
public文件夹里的静态资源引用
# 在 public/index.html中引用静态资源
《%= webpackConfig.output.publicPath %》
《link rel="shortcut icon" href="《%= webpackConfig.output.publicPath %》favicon.ico" rel="external nofollow" 》
# vue templates中，需要在data中定义baseUrl
《template》
《img :src="`${baseUrl}my-image.png`"》
《/template》
《script》
data () {
return {
baseUrl: process.env.BASE_URL
}
}
《/script》webpack配置修改
用 webpack-chain 修改webpack相关配置，强烈建议先熟悉webpack-chain和vue-cli 源码，以便更好地理解这个选项的配置项。
对模块处理配置
// vue.config.js
module.exports = {
chainWebpack: config =》 {
config.module
.rule(’js’)
.include
.add(/some-module-to-transpile/) // 要处理的模块
}
}修改webpack Loader配置
// vue.config.js
module.exports = {
chainWebpack: config =》 {
config.module
.rule(’scss’)
.use(’sass-loader’)
.tap(options =》
merge(options, {
includePaths: ,
})
)
}
}修改webpack Plugin配置
// vue.config.js
module.exports = {
chainWebpack: config =》 {
config
.plugin(’html’)
.tap(args =》 {
return
})
}
}eg: 在本次项目较小，只对uglifyjs进行了少量的修改，后期如果还有配置上优化会继续添加。
chainWebpack: config =》 {
if (process.env.NODE_ENV === ’production’) {
config
.plugin(’uglify’)
.tap(() =》{
// 去除 console.log
return [Object.assign(options, {
uglifyOptions: { compress: {
drop_console : true,
pure_funcs:
}}
})]
})
}
}全局变量的设置
在项目根目录创建以下项目：
.env # 在所有环节中执行
.env.local # 在所有环境中执行，git会ignored
.env. 可以是 "development", "production" or "test" )
.env..local # 在特定环境执行, git会ignored
.env.development # 只在生产环境执行
.env.production # 只在开发环境执行在文件里配置键值对：
# 键名须以VUE_APP开头
VUE_APP_SECRET=secret在项目中访问：
console.log(process.env.VUE_APP_SECRET)这样项目中的 process.env.VUE_APP_SECRET 就会被 secret 所替代。
vue-cli 3 就项目性能而言已经相当友好了，私有制定性也特别强，各种配置也特别贴心，可以根据项目大小和特性制定私有预设，对前期项目搭建而言效率极大提升了。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
怎样对JS+TypeScript中class进行使用
vue计算属性与侦听器实战项目详解

vue3教程

返回一个提供应用上下文的应用实例。应用实例挂载的整个组件树共享同一个上下文。

创建组件

或者是一个 setup 函数，函数名称将作为组件名称来使用

创建一个异步加载组件

// 高阶组件

在当前应用中查找组件， 只能在 render 或 setup 函数中使用。

查找组件

在当前应用中查找指令， 只能在 render 或 setup 函数中使用。

将回调推迟到下一个 DOM 更新周期之后执行。在更改了一些数据以等待 DOM 更新后立即使用它。

vue2.x的生命周期

vue3的生命周期

与 2.x 版本生命周期相对应的组合式 API

新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

问题: reactive 对象取出的所有属性值都是非响应式的

解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

利用ref函数获取组件中的标签元素

功能需求: 让输入框自动获取焦点