@@ -641,7 +641,7 @@ <h4 id="JSX-vs-Templates"><a href="#JSX-vs-Templates" class="headerlink" title="
641641< p > 更抽象一点来看，我们可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。</ p >
642642< h4 id ="CSS-的组件作用域 "> < a href ="#CSS-的组件作用域 " class ="headerlink " title ="CSS 的组件作用域 "> </ a > CSS 的组件作用域</ h4 > < p > 除非你把组件分布在多个文件上(例如 < a href ="https://github.com/gajus/react-css-modules " target ="_blank " rel ="external "> CSS Modules</ a > )，要不在 React 中作用域内的 CSS 就会产生警告。非常简单的 CSS 还可以工作，但是稍微复杂点的，比如悬停状态、媒体查询、伪类选择符等要么通过沉重的依赖来重做要么就直接不能用。</ p >
643643< p > 而 Vue 可以让你在每个< a href ="single-file-components.html "> 单文件组件</ a > 中完全访问 CSS。</ p >
644- < figure class ="highlight html "> < table > < tr > < td class ="code "> < pre > < div class ="line "> < span class ="tag "> << span class ="name "> style</ span > < span class ="attr "> scoped</ span > ></ span > < span class ="css "> </ span > </ div > < div class ="line "> @< span class =" keyword " > media</ span > (min-width: < span class =" number " > 250px</ span > ) {</ div > < div class ="line "> < span class =" selector-class " > .list-container</ span > < span class =" selector-pseudo " > :hover</ span > {</ div > < div class ="line "> < span class =" attribute " > background</ span > : orange;</ div > < div class ="line "> }</ div > < div class ="line "> }</ div > < div class ="line "> < span class ="tag "> </< span class ="name "> style</ span > ></ span > </ div > </ pre > </ td > </ tr > </ table > </ figure >
644+ < figure class ="highlight html "> < table > < tr > < td class ="code "> < pre > < div class ="line "> < span class ="tag "> << span class ="name "> style</ span > < span class ="attr "> scoped</ span > ></ span > < span class ="undefined "> </ span > </ div > < div class ="line "> @media (min-width: 250px) {</ div > < div class ="line "> .list-container:hover {</ div > < div class ="line "> background: orange;</ div > < div class ="line "> }</ div > < div class ="line "> }</ div > < div class ="line "> < span class ="tag "> </< span class ="name "> style</ span > ></ span > </ div > </ pre > </ td > </ tr > </ table > </ figure >
645645< p > 这个可选 < code > scoped</ code > 属性会自动添加一个唯一的属性（比如 < code > data-v-21e5b78</ code > ）为组件内 CSS 指定作用域，编译的时候 < code > .list-container:hover</ code > 会被编译成类似 < code > .list-container[data-v-21e5b78]:hover</ code > 。</ p >
646646< p > 如果你已经熟悉 CSS Modules，Vue 单文件组件也有 < a href ="http://vue-loader.vuejs.org/en/features/css-modules.html " target ="_blank " rel ="external "> first-class 支持它</ a > 。</ p >
647647< p > 最后，就像 HTML 一样，你可以选择自己偏爱的 CSS 预处理器（或后处理器）编写 CSS，这些生态系统允许您利用现有的库。这可以让你围绕设计为中心展开工作，,比如您的构建过程中颜色操作，而不是引入专门的库来增加你应用的体积和复杂度。</ p >
@@ -700,7 +700,8 @@ <h2 id="Polymer"><a href="#Polymer" class="headerlink" title="Polymer"></a>Polym
700700< p > 而 Vue 和 Web Component 标准进行深层次的整合也是完全可行的，比如使用 Custom Elements、Shadow DOM 的样式封装。然而在我们做出严肃的实现承诺之前，我们目前仍在等待相关标准成熟，进而再广泛应用于主流的浏览器中。</ p >
701701< h2 id ="Riot "> < a href ="#Riot " class ="headerlink " title ="Riot "> </ a > Riot</ h2 > < p > Riot 2.0 提供了一个类似于基于组件的开发模型（在 Riot 中称之为 Tag），它提供了小巧精美的 API。Riot 和 Vue 在设计理念上可能有许多相似处。尽管相比 Riot ，Vue 要显得重一点，Vue 还是有很多显著优势的：</ p >
702702< ul >
703- < li > < a href ="transitions.html "> 过渡效果系统</ a > 。Riot 现在还没有提供。< br > -功能更加强大的路由机制，Riot 的路由功能的 API 是极少的。</ li >
703+ < li > < a href ="transitions.html "> 过渡效果系统</ a > 。Riot 现在还没有提供。</ li >
704+ < li > 功能更加强大的路由机制，Riot 的路由功能的 API 是极少的。</ li >
704705< li > 更好的性能。Riot 使用了 < a href ="http://riotjs.com/compare/#virtual-dom-vs-expressions-binding " target ="_blank " rel ="external "> 遍历 DOM 树</ a > 而不是虚拟 DOM，但实际上用的还是脏检查机制，因此和 Angular 1 患有相同的性能问题。</ li >
705706< li > 更多成熟工具的支持。Vue 提供官方支持< a href ="https://github.com/vuejs/vue-loader " target ="_blank " rel ="external "> Webpack</ a > 和 < a href ="https://github.com/vuejs/vueify " target ="_blank " rel ="external "> Browserify</ a > ，而 Riot 是依靠社区来建立集成系统。</ li >
706707</ ul >
0 commit comments