关于vue.js:script-中定义函数有几种写法为什么有的用-methods-有的用-const

103次阅读

共计 806 个字符，预计需要花费 3 分钟才能阅读完成。

在 Vue 的组件中，有几种常见的形式来定义函数：

应用 methods 对象：您能够在组件的 methods 对象中定义函数。这种形式能够在组件的模板中间接调用这些函数。例如：

<script>
export default {
  methods: {handleClick() {// 解决点击事件的逻辑},
  },
};
</script>

应用一般的 JavaScript 函数定义：您能够在 <script> 标签中间接编写 JavaScript 函数，并在须要的中央调用它们。这种形式能够灵便地定义和应用函数。例如：

<script>
function handleClick() {// 解决点击事件的逻辑}

export default {// ...};
</script>

应用 computed 计算属性：如果您心愿定义一个依据其余数据动静计算得出的函数，能够应用 computed 计算属性。计算属性会依据依赖的数据主动进行更新，而不须要手动调用。例如：

<script>
export default {data() {
    return {count: 0,};
  },
  computed: {doubledCount() {return this.count * 2;},
  },
};
</script>

应用 const 申明：如果您只须要在组件的作用域内定义一个函数，并且不须要在模板中间接调用它，能够应用 const 申明一个函数。这种形式次要实用于外部应用的辅助函数。例如：

<script>
const helperFunction = () => {// 辅助函数的逻辑};

export default {// ...};
</script>

在编写 Vue 组件时，依据您的需要和函数的应用场景，能够抉择适宜的函数定义形式。methods 和一般 JavaScript 函数是最罕用的形式，能够在模板中间接应用。computed 计算属性实用于依据其余数据进行计算的状况。const 申明实用于组件外部的辅助函数或公有函数，不须要在模板中调用。

正文完