@media(min-width:250px){.list-container:hover{background:orange;}}性能优化在React应用中，当一个组件的状态发生变化时，它会重新渲染以该组件为根的整个组件子树。为了避免不必要的子组件重新渲染，您需要尽可能使用PureComponent，或者手动实现shouldComponentUpdate方法。同时你可能需要使用不可变的数据结构来让你的组件更容易优化。但是在使用PureComponent和shouldComponentUpdate时，需要保证组件整个子树的渲染输出是由组件的props决定的。如果不是这种情况，那么此类优化可能会导致细微的渲染不一致。这使得React中的组件优化非常费脑力。在Vue应用程序中，组件依赖项在渲染过程中会自动跟踪，因此系统确切地知道哪些组件实际需要重新渲染。可以理解为每个组件都自动获取了shouldComponentUpdate，没有上面提到的子树问题的限制。Vue的这个特性让开发者不再需要考虑这样的优化，从而可以更好的专注于应用本身。HTML和CSS在React中，一切都是JavaScript。不仅HTML可以用JSX来表达，现在的趋势也是将CSS融入到JavaScript中进行处理。Vue的整体思想是拥抱经典的Web技术并在它们之上进行扩展。JSXvsTemplates在React中，所有的组件渲染功能都依赖于JSX。JSX可以使用编程语言JavaScript的全部功能来构建您的视图页面。比如可以使用临时变量，JS自带的流控，直接引用当前JS范围内的值等等。Vue也支持JSX，但是默认推荐模板。我们可以将组件分为两类：一类是表现性的，一类是逻辑性的。Vue建议前者使用模板，后者使用JSX或渲染函数。这两类组件的比例会根据应用的类型而有所不同，但总体来说，Vue项目中表现类组件远多于逻辑类组件。Component-ScopedCSS除非您将组件分布在多个文件中（例如CSS模块），否则React中的CSS范围是通过CSS-in-JS解决方案（例如styled-components和emotion）实现的。这里React和Vue的主要区别在于，Vue默认设置样式的方法是在单文件组件中使用类样式标签。单文件组件让您可以完全控制同一文件中的CSS作为组件代码的一部分。@media(min-width:250px){.list-container:hover{background:orange;}}复制代码这个可选的scoped属性会自动添加一个唯一的属性（比如data-v-21e5b78)指定组件内CSS的范围。编译时，.list-container:hover会被编译成类似.list-container[data-v-21e5b78]:hover的形式。ScaleVue的路由库和状态管理库均由官方维护，并随核心库一起更新。React选择将这些问题留给社区，从而创建了一个更加去中心化的生态系统。但相对来说，React的生态要比Vue的更加繁荣。React有一个陡峭的学习曲线，在开始学习React之前，您需要了解JSX和ES2015，因为许多示例都使用这些语法。由于Vue初期不需要学习JSX和ES2015，开发者可以通过阅读指南在不到一天的时间内构建简单的应用程序。React的框架大小比Vue略大。diff算法diff算法不同，具体参考React、Vue2、Vue3的三种Diff算法
