method computed watch的区别

method和computed都是Vue.js中的属性，但是它们的作用不同。method是一个函数，它可以在Vue实例中被调用，而computed是一个计算属性，它会根据依赖的数据动态计算出一个新的值。

watch是Vue.js中的另一个属性，它可以用来监听数据的变化并执行相应的操作。computed watch并不存在，可能是您想问的是computed和watch的区别。computed会根据依赖的数据动态计算出一个新的值，而watch则是监听数据的变化并执行相应的操作。computed是基于它的依赖缓存的，只有当依赖发生改变时才会重新计算，而watch则是在数据变化时执行回调函数。

相关问题

为何子组件中获取不到数据？、<!--游戏排行卡片区域--> <div class="card-three"> <!--排行榜卡片01--> <MyCard01 :dataList="this.typeList" style="margin-left: 20px"></MyCard01> <!--排行榜卡片02--> <MyCard02 style="margin-left: 20px"></MyCard02> <!--排行榜卡片03--> <MyCard03 style="margin-left: 20px"></MyCard03> </div> //data属性数据 data() { return { //首页游戏排行的数据列表 typeList: [], }; }, //事件函数 methods: { //首页游戏排名数据 getIndexGameRankList() { this.$http({ //请求方式 method: "GET", //请求地址 url: myapi.getIndexGameRankList, }) .then((response) => { //首页游戏排行的数据列表 this.typeList = response.data.data; }) .catch((error) => {}); }, }, //计算属性 computed: {}, //监听器 watch: {}, //生命周期函数（组件创建后）-->【常用】 //可正常访问props、data、methods等（如：调用methods，发起axios请求，向data中存数据） created() { this.getIndexGameRankList(); },

在子组件中无法获取到数据的原因可能有几个可能的原因：

1. 检查子组件的props是否正确设置：确保子组件的props名称与父组件传递的属性名称一致，并且确保在父组件中传递了正确的属性值。

2. 检查子组件是否正确引用了父组件的data属性：在你的代码中，你在子组件中使用了`this.typeList`来引用父组件的data属性。请注意，在模板中，不需要使用`this`关键字来引用父组件的data属性。你可以直接使用`typeList`来访问该属性。

例如，将`<MyCard01 :dataList="this.typeList" style="margin-left: 20px"></MyCard01>`更改为`<MyCard01 :dataList="typeList" style="margin-left: 20px"></MyCard01>`。

3. 确保父组件中的数据已经成功获取：在你的代码中，你在父组件的`created`生命周期函数中调用了`getIndexGameRankList`方法来获取数据。请确保该方法成功获取到数据，并将其赋值给`typeList`属性。你可以在父组件中添加一些日志输出，以便检查是否成功获取到数据。

如果以上步骤都没有解决问题，请提供更多关于问题的详细信息，以便我能够更好地帮助你解决问题。

axios.defaults.baseURL = 'http://localhost:8080/book/'; var vm = new Vue({ el: '#app', data: { id: '', bookName:'', flag: false, submitFlag: false, books: [] }, methods:{ handle: async function () { //编辑 var book = { id: this.id, bookName: this.bookName }; await axios.put(book.id, book); await this.queryBooks(); this.id = ''; this.bookName = ''; this.flag = false; }, //编辑处理 toEdit: async function (id) { var response = await axios.get(id); this.id = response.data.id; this.bookName = response.data.bookName; this.flag = true; }, deleteBook: async function (id) { }, queryBooks: async function () { var response = await axios.get(); this.books = response.data; } }, computed:{ total: function () { return this.books.length; } }, watch: { name: function (val) { console.log(val); } }, mounted:function () { this.queryBooks(); } });补全代码通过JSON选项传参数

需要在调用 axios 方法时，传入一个配置对象，并在该对象中设置 `data` 属性，该属性的值为一个 JSON 格式的对象，表示需要传递的参数。示例代码如下：

axios({
  method: 'post',
  url: '/api',
  data: {
    name: '张三',
    age: 18,
    gender: '男'
  },
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

其中，`data` 属性的值为一个 JSON 格式的对象，表示需要传递的参数。在发送 POST 请求时，需要设置请求头的 `Content-Type` 属性为 `application/json`，表示请求体为 JSON 格式。