[toc] ## 數據傳遞和設置html屬性 Vue中通過`v-bind:`傳遞數據，通過`v-on:emit的的值`傳遞函數 而React中不論是哪種數據類型（包括函數），都是以一個tag屬性的形式傳遞的 另外不從傳遞數據方面講，而是從設置html屬性的角度來看， --- React和原生的沒有區別，Vue也沒有區別 ，但是Vue還可以通過`v-bind:`來設置原生的html屬性，此時屬性的值不再是字符串，而是一個JS表達式(同React中的`xx={}`)，并且vue對一些特殊的屬性進行了封裝，比如`style`、`class` ，另外需要注意的是通過`v-bind`綁定的屬性必須要有值，不然會報錯。 ## 關于入口 Vue會替換掉綁定的入口(`<div id="app">`) ，而React不會 其實替換一詞用得不準確，準確來說是，在聲明周期`created`和`beforeMount`之間，Vue如果發現用戶使用`template`屬性創建模板，就會忽略el掛載點的模板而采用template屬性指定的模板。 ## 關于重新渲染 React必須調用setState(只要調用，即使是個`{}`)或則接收的屬性發生改變才會重新渲染組件 而Vue是`this.$data`里的屬性發生改變，并且發生改變的數據被模板渲染所依賴的話，才會重新渲染 ### 另外如果這個屬性是個數組 直接改變存在于$data里的某個數組屬性，是不會重新渲染模板的，必須通過vue支持的7種數組的變異方法才會 - push - pop - shift - unshift - splice - sort - reverse 或則可以通過改變數組屬性的引用`this.list = this.list.filter((item,i)=>i!==index);` 再或則通過set方法向對象里注入數據 `Vue.set(vm.userInfo,1,'ahhh')` (第二個參數為要改變數組第幾項，第三個參數為要被替換成的數據) set方法實例上也有`vm.$set(vm.userInfo,1,'ahhh')` ### 另外如果這個屬性是對象 改變對象的值會重新渲染，但添加并不會，`delete obj[attr]` 也不會 ，解決辦法是通過改變對象的引用 ，或則通過set方法向對象里注入數據 `Vue.set(vm.userInfo,'location','chengdu')` set方法實例上也有`vm.$set(vm.userInfo,'location','chengdu')` ## data、state Vue沒有state的概念，只有data。 但Vue的data是`reactive`的，等同于state，但無需像React一樣必須通過`setState`來修改 ### Vue能監聽專門某一個屬性的變化 通過`watch` ## slot和children `<slot>` 就相當于React中的`{this.props.children}` 默認所有children都會放到組件中<slot>放置的位置 若想某個組件放到某個地方 請使用具名插槽 另外`this.$slots.default` 能獲得所有沒有設置名字的slot 元素 ，`$slots.xx` 能獲得名字設置為`'xx'`的slot元素 ，這方便在JSX中直接`{this.$slotx.xx}`使用 ### $children **Vue** 中的 **$children** 是所有子**組件** 而不是所有child  ## <>組件 vue中的組件都以小寫開頭 而React以大寫字母開頭 另外vue中標簽**不**支持自閉和