vue.js心得体会

guyuefangyuanda

已于 2023-12-28 22:34:30 修改

阅读量281

点赞数 8

文章标签：人工智能算法机器学习

于 2023-12-28 21:26:24 首次发布

本文链接：https://blog.csdn.net/guyuefangyuanda/article/details/135278833

版权

、VueJS是什么?
它是一个轻量级MVVM框架
数据驱动+组件化的前端开发
Github 超过25K + 的star 熟，社区完善
Vue.js更轻量，gzip后大小只有26K；更易上手，学习曲线平稳
形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期
二、Vue的优缺点
优点
1. 轻量级
Vue作为一款轻量级前端框架，大小只有18–21KB，工程搭建简单，只需要几行命令符。因为Vue使用的主体语言为JS，开发者可以灵活地将其他框架（如React和Angular）的项目迁移到Vue，具有很高的集成能力。Vue提供的router路由可以便捷地搭建一个多界面应用。

2. 高性能
虚拟DOM和响应式避免了不必要的全局重新渲染，提升了用户体验，使用户操作更加流畅。

3. 好上手
与面向对象编程性质类似，组件化更符合人类思维。打个比方，我们在设计网页时，通常会把一个界面分成一块一块的、用于某功能的特定样式模块。Vue的组件化使前端开发更加容易理解，同时MVVM可以更便捷地实现交互，对新手十分友好。

4. 插件化
由于Vue框架的流行性，目前有许多基于Vue的npm扩展包和开发工具（如Vuex）。Vue可以在一个文件下统一管理所有外部插件的全局使用。

4、代码区别

vue2版本
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   
   <script src="./js/v2.6.10/vue.js"></script>
</head>
<body>
   
   <div id='app'>
       {{msg}}
   </div>

   <script>
       var vm=new   Vue({
           el:'#app',
           data:{
               msg:'hello'
           }
       })
   </script>
</body>
</html>

5. 便于测试

1. 直接引用script

2. 安装脚手架

npm install -g @vue/cli

3.创建应用实例

const app = Vue.createApp({

data() { return { count: 4 }

} })

const vm = app.mount('#app')

console.log(vm.count) // => 4

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>第一个vue案例</title>
       <script src="../js/vue.js"></script>
   </head>
   <body>
   <div id="app">
        hello Vue!
   </div>
   <script>
       const app = Vue.createApp({
           data() {
               return { count: 4 }
            }
       })
       const vm = app.mount('#app')
       console.log(vm.count) // => 4
   </script>
   </body>
</html>

组件化利于开发者对于单一组件进行测试，很少发生在整个页面下找不到是哪个地方报错的情况。

缺点

1. 生态环境不够完善

虽然Vue五年以来的发展寻索，生态环境不如React和Angular规范。Vue开发的讨论社区较小。

2. 国外市场小

Vue是由中国尤大神开发的，主要有阿里巴巴、饿了么等国内大公司作为主流框架，国外大部分使用React和Angular。

三、vue2和vue3的模板区别
1.响应式的区别
2.0中vue的响应式是基于数据劫持（object.defineProperty这个方法来进行劫持的）当前这个方法是兼容主流浏览器的ie9以上都可以使用他是可以监听数据的变化从而让vue做出改变

但是他有一个bug object.defineProperty这个方法只能够监听初始化的时候数据如果程序运行到一半你给data中的对象或者是数组添加新属性的时候由于他只会在初始化监听那么你中间添加的内容就无法监听没有监听到就没有数据劫持没有数据劫持那么久没有双向绑定没有双向绑定那么数据变视图就不会发生改变我们使用$set

3.0中对2.0的bug进行了解决

3.0中的响应式是采用ES2015中最新的一个规范 Proxy来进行替代的 proxy是惰性监听（他不会在初始化的时候监听数据而是在你使用数据的时候才回去监听）

proxy是一个比较新的规范 ie还不支持 vue为了解决ie不支持的问题所以单独给ie进行了适配

传统主流浏览器使用proxy来进行监听

但是在ie中还是使用2.0中的object.defineProperty

2.底层的变化
3.0底层全部都是使用ts（typescript）编写的今后3.0可以更好的与ts结合

3.属性声明方式
2.0中都是使用vue属性的方式来创建数据方法计算属性等内容的

3.0中改变了变成了 api方式进行创建也就是或vue3.0把变量方法计算属性等内容封装成了一个个的方法使用方法的方式进行调用