2021-02-03 10:13发布
vue3.0 vs vue2.0
变化：
对普通类型的值(String,Number,Boolean)的引用以及赋值采用ref(),改变赋值的引用采用 xx.value='xxx'
对对象类型的赋值采用reactive({})
生命周期的变化
方法、计算属性以及监听属性的变化
优化：
逻辑复用的提升，解决了变量名冲突以及溯源困难的问题
1、默认进行懒观察（lazy observation）。在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
2、更精准的变更通知。比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
3、3.0 新加入了 TypeScript 以及 PWA 的支持
4、部分命令发生了变化：
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
5、默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
Vue 3.0 使用的是Composition API，Vue 2.0使用的是 Optional API。这个是最大的不同。Composition API最大的好处是你可以根据需要决定你要不要import。例如computed这个方法，如果你的页面不需要，就不用import。
Vue 3.0的另一个提升就是完全拥抱ts。
总之一点，感觉越来越像一个简版的Angular。
vue3的变化可以总结为以下几点：更小、更快、加强typescript支持、Api一致性、提高可维护能力、开放更多底层功能。
vue-cli2.x升级vue-cli3.x之后使用npm run serve 运行项目需要注意的是，升级后打包时static文件夹不会自动复制到dist文件夹，需要把static文件夹复制到public文件夹(或者手动配置CopyWebpackPlugin
vue3.0
更小
更快
加强typescript支持
Api一致性
提高可维护能力
开放更多底层功能
vue页面跳转后返回原页面初始位置 vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly...
这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。（1）首先说下MVC MVC全名是Model View Controller，是模型（model）－视图（view）－控制器（controller）的缩写。MVC开始是存在于桌面程序中，使用MVC的目的是将M和V的实现代码分离。从图里可以看...
目前，对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求，那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目，而你的网站内容不需要AJAX去获取内容和展示内容，那么可以试试 prerender-spa-plugin 这个插件，这个插件是...
Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库，而且Bootstrap大部分组件是依赖css的，依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等
首先你需要引入另一个界面，然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】
是的，前端不会Vue根本就没必要再聊下去了
这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708
内部图表大小是与div容器大小位置相关的，如果想调整图表大小位置，调整div的属性就可以。如果是想调整图表与div间上下左右留白，则设置grid属性就可以。
使用 /deep/ 注意：使用 cass 和 less 只能使用 /deep/ 这个方法
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容： [removed] import '@/icons' export default { name: 'svg-icon', props: { iconClass: { ...
引用数据类型数组的元素是对象引用,没有实际的值，需要给它实例。例如date days = new date[5];days[0] = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。
计算属性与响应式并不冲突对立的存在，计算属性往往是用于数据的聚合或者离散，数据响应式的话就是视图响应数据变动（先容我装个逼）在vue中就是通过watcher调用一次实例对象中data的数据（当然这层数据也会做一层映射，映射到实例的属性中）在数据的defineOb...
Vue中有一个自带的transition组件，就是用来实现过渡效果的，具体怎么使用呢，很简单，其实就两个步骤：①用transition组件，把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单，比把大象装冰箱还简单。然而，并没有，在这两个步骤中，我们要...
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 章鱼小肉丸 的问题《vue3.0和vue2.0的区别有哪些，优点是什么》','http://www.shouhuola.com/q-33716.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
vue3.0 vs vue2.0
变化：
对普通类型的值(String,Number,Boolean)的引用以及赋值采用ref(),改变赋值的引用采用 xx.value='xxx'
对对象类型的赋值采用reactive({})
生命周期的变化
方法、计算属性以及监听属性的变化
优化：
逻辑复用的提升，解决了变量名冲突以及溯源困难的问题
Vue3.0和Vue2.0的区别
1、默认进行懒观察（lazy observation）。
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
2、更精准的变更通知。
比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
3、3.0 新加入了 TypeScript 以及 PWA 的支持
4、部分命令发生了变化：
下载安装 npm install -g vue@cli
删除了vue list
创建项目 vue create
启动项目 npm run serve
5、默认项目目录结构也发生了变化：
移除了配置文件目录，config 和 build 文件夹
移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
Vue 3.0 使用的是Composition API，Vue 2.0使用的是 Optional API。这个是最大的不同。Composition API最大的好处是你可以根据需要决定你要不要import。例如computed这个方法，如果你的页面不需要，就不用import。
Vue 3.0的另一个提升就是完全拥抱ts。
总之一点，感觉越来越像一个简版的Angular。
vue3的变化可以总结为以下几点：更小、更快、加强typescript支持、Api一致性、提高可维护能力、开放更多底层功能。
vue-cli2.x升级vue-cli3.x之后
使用npm run serve 运行项目
需要注意的是，升级后打包时static文件夹不会自动复制到dist文件夹，需要把static文件夹复制到public文件夹(或者手动配置CopyWebpackPlugin
vue3.0
更小
更快
加强typescript支持
Api一致性
提高可维护能力
开放更多底层功能
相关问题推荐
vue页面跳转后返回原页面初始位置 vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly...
这个问题建议你系统了解下MVC→MVP→MVVM的进化历程。（1）首先说下MVC MVC全名是Model View Controller，是模型（model）－视图（view）－控制器（controller）的缩写。MVC开始是存在于桌面程序中，使用MVC的目的是将M和V的实现代码分离。从图里可以看...
目前，对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求，那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目，而你的网站内容不需要AJAX去获取内容和展示内容，那么可以试试 prerender-spa-plugin 这个插件，这个插件是...
Bootstrap和vue不是一个层级的东西.Bootstrap是在jquery时代的UI组件库，而且Bootstrap大部分组件是依赖css的，依赖jQuery的组件主要是有交互的弹窗组件、下拉菜单等
首先你需要引入另一个界面，然后通过$refs.refName的方式调用弹框的方法后者直接把弹框的属性置成true。注意需要另一个页面渲染完成后才能用【$refs.refName】
是的，前端不会Vue根本就没必要再聊下去了
这里有一篇文章可以帮助你https://blog.csdn.net/qq_40282732/article/details/105962708
内部图表大小是与div容器大小位置相关的，如果想调整图表大小位置，调整div的属性就可以。如果是想调整图表与div间上下左右留白，则设置grid属性就可以。
使用 /deep/ 注意：使用 cass 和 less 只能使用 /deep/ 这个方法
创建icons/svg文件夹将svg文件放在该文件夹下面在components文件夹中创建svgiconfont.vue文件文件内容： [removed] import '@/icons' export default { name: 'svg-icon', props: { iconClass: { ...
引用数据类型数组的元素是对象引用,没有实际的值，需要给它实例。例如date days = new date[5];days[0] = new date(2000,12,3)每一个days都要去分配。而基础类型都有默认初始值。
计算属性与响应式并不冲突对立的存在，计算属性往往是用于数据的聚合或者离散，数据响应式的话就是视图响应数据变动（先容我装个逼）在vue中就是通过watcher调用一次实例对象中data的数据（当然这层数据也会做一层映射，映射到实例的属性中）在数据的defineOb...
Vue中有一个自带的transition组件，就是用来实现过渡效果的，具体怎么使用呢，很简单，其实就两个步骤：①用transition组件，把要做过渡效果的元素包起来②写上相应的过渡效果的css是不是很简单，比把大象装冰箱还简单。然而，并没有，在这两个步骤中，我们要...