官網的示例

var vm = new Vue({ el: '#example', data: { message: 'Hello' }});

項目中的寫法

data() { return { message: 'Hello' } }

為什么要把data變成函數并return屬性呢？

組件是一個可復用的實例，當你引用一個組件的時候，組件里的data是一個普通的對象，所有用到這個組件的都引用的同一個data，就會造成數據污染。

將data封裝成函數后，在實例化組件的時候，我們只是調用了data函數生成的數據副本，避免了數據污染。

PS：下面看下vue中data是否使用return的區別

// Vue實例中data屬性是如下方式展示的：let app = newVue({  el: "#app",  data: { msg: '' },  methods: {}})// 使用組件化的項目中是如下方式展示的:export default{  data(){    return{      showLogin:true,      msg:''    }  },  methods:{}}

// 為何在大型項目中data需要使用return返回數據呢？
// 答：不使用return包裹的數據會在項目的全局可見，會造成變量污染
//    使用return包裹后數據中變量只在當前組件中生效，不會影響其他組件

總結

以上所述是小編給大家介紹的vue里的data要用return返回的原因淺析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！